当前位置：首页 > news >正文

CSS3 过渡与动画

news 2025/5/9 6:47:06

在现代网页设计中，平滑的过渡和生动的动画效果已成为提升用户体验不可或缺的元素。CSS3 为我们提供了强大的 transition 和 animation 属性，让开发者能够轻松实现各种视觉效果。本文将深入探讨这两大功能的特性和应用场景。

一、CSS3 过渡（Transition）

1.1 什么是过渡？

CSS3 过渡就像网页元素的"黄油"，它允许属性值在一定时间内平滑变化，而不是瞬间切换。这种效果可以应用于鼠标悬停、焦点获取或任何属性改变的场景。

1.2 过渡的核心属性

transition: property duration timing-function delay;

transition-property：指定要过渡的CSS属性（如 height, background-color）
transition-duration：过渡持续时间（秒或毫秒）
transition-timing-function：速度曲线（如 ease, linear, ease-in-out）
transition-delay：过渡开始前的延迟时间

transition-property

该属性用来指定过渡动画 CSS 属性名称，该属性的语法如下：

transition-property: none | all ｜ property

并不是所有的属性都可以进行过渡，只有属性是具有一个中点值的属性才能够进行过渡效果。因为这样才能通过不停的修改中间值从而实现过渡效果。例如 display:none|block 就没有中间值，所以无法应用过渡。能够过渡的属性类型有颜色属性、具有长度值或百分比的属性、阴影、变形系列属性，具体支持过渡的属性可以参阅下表：

支持过渡的属性
background-color	background-position	border-bottom-color	border-bottom-width
border-left-color	border-left-width	border-right-color	border-right-width
border-spacing	border-top-color	border-top-width	bottom
clip	color	font-size	font-weight
height	left	letter-spacing	line-height
margin-bottom	margin-left	margin-right	margin-top
max-height	max-width	min-height	min-width
opacity	outline-color	outline-width	padding-bottom
padding-left	padding-right	padding-top	right
text-indent	text-shadow	vertical-align	visibility
width	word-spacing	z-index

transition-duration

该属性主要用于设置一个属性过渡到另一个属性所需要的时间，单位为秒(s)或者毫秒(ms)。默认值为 0，代表变换是即时的。

transition-timing-function

该属性用于设置过渡的速度，有如下的取值：

transition-delay

过渡延迟多久触发，单位为秒或者毫秒。但是值可以是正整数，负整数和 0。负整数的计算会从整体过渡时间中去做减法运算，举个例子：

div {width: 100px;height: 100px;transition: all 5s -2s;/* 设置为 -2s，相当于已经执行了 2s */
}
div:hover{height: 300px;
}

1.3 过渡事件

JavaScript 可以监听过渡完成事件：

element.addEventListener('transitionend', function() {console.log('过渡效果结束');
});

二、CSS3 动画（Animation）

2.1 关键帧动画

CSS3 动画比过渡更强大，它通过 @keyframes 规则定义动画序列：

@keyframes slide-in {0% {transform: translateX(-100%);}100% {transform: translateX(0);}
}

2.2 动画属性详解

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：关键帧动画名称
animation-duration：动画持续时间
animation-timing-function：速度曲线
animation-delay：开始前延迟
animation-iteration-count：播放次数（infinite 表示无限循环）
animation-direction：播放方向（normal, reverse, alternate）
animation-fill-mode：动画结束后的样式状态
animation-play-state：控制暂停/播放

前面 4 个属性大体上和前面介绍的 transition 的属性类似，这里我们主要看一下后面几个属性。

animation-iteration-count
animation-iteration-count 属性定义动画应该播放多少次，如果想要一直播放，那么次数就是无限次，所以属性值为 infinite。

animation-direction

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

如果动画被设置为只播放一次，该属性将不起作用。无论动画正向播放还是反向播放，都会算一次次数。

animation-fill-mode

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

一般主要用于设置动画播放完毕后的状态。

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

用得最多的值就是 forwards，定义动画播放完后保持结束时候的样子。默认值为 none，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。当取值为 backwards 时，会在动画结束时迅速应用动画的初始帧。

animation-play-state

animation-play-state 属性规定动画正在运行还是暂停，语法为：

animation-play-state: paused|running;

该属性一般配合着 JS 一起使用，从而达到对动画播放状态的一个控制。

2.3 动画事件

element.addEventListener('animationstart', function() {console.log('动画开始');
});element.addEventListener('animationiteration', function() {console.log('动画重复播放');
});element.addEventListener('animationend', function() {console.log('动画结束');
});

三、过渡与动画的对比

特性	过渡 (Transition)	动画 (Animation)
触发方式	需要状态改变（如:hover）	自动播放
复杂度	简单，两状态间变化	复杂，可定义多关键帧
循环	不能循环	可以无限循环
控制	相对简单	更精细的控制
性能	通常性能更好	复杂动画可能影响性能
适用场景	简单的交互效果	复杂的连续动画