CSS3 过渡与动画
在现代网页设计中，平滑的过渡和生动的动画效果已成为提升用户体验不可或缺的元素。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） | 自动播放 |
| 复杂度 | 简单，两状态间变化 | 复杂，可定义多关键帧 |
| 循环 | 不能循环 | 可以无限循环 |
| 控制 | 相对简单 | 更精细的控制 |
| 性能 | 通常性能更好 | 复杂动画可能影响性能 |
| 适用场景 | 简单的交互效果 | 复杂的连续动画 |
结语
环 |
| 控制 | 相对简单 | 更精细的控制 |
| 性能 | 通常性能更好 | 复杂动画可能影响性能 |
| 适用场景 | 简单的交互效果 | 复杂的连续动画 |
结语
CSS3 过渡和动画为网页设计师和开发者提供了强大的工具，可以创建流畅、吸引人的用户界面。理解它们的原理和特性，能够帮助我们在适当的场景选择合适的技术方案。通过合理运用这些技术，我们可以显著提升用户体验，使网站更加生动和专业。