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

一、CSS3 过渡（Transition）

1.1 什么是过渡？

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

1.2 过渡的核心属性

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

1. 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

2. transition-duration

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

3. transition-timing-function

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

4. transition-delay

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

1.3 过渡事件

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

二、CSS3 动画（Animation）

2.1 关键帧动画

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

2.2 动画属性详解

• 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 的属性类似，这里我们主要看一下后面几个属性。

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

2. animation-direction

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

3. animation-fill-mode

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

4. animation-play-state

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

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

2.3 动画事件

三、过渡与动画的对比

结语

CSS3 过渡和动画为网页设计师和开发者提供了强大的工具，可以创建流畅、吸引人的用户界面。理解它们的原理和特性，能够帮助我们在适当的场景选择合适的技术方案。通过合理运用这些技术，我们可以显著提升用户体验，使网站更加生动和专业。