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 就没有中间值，所以无法应用过渡。能够过渡的属性类型有颜色属性、具有长度值或百分比的属性、阴影、变形系列属性，具体支持过渡的属性可以参阅下表：

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('动画结束');
});

三、过渡与动画的对比

结语

环 |
| 控制 | 相对简单 | 更精细的控制 |
| 性能 | 通常性能更好 | 复杂动画可能影响性能 |
| 适用场景 | 简单的交互效果 | 复杂的连续动画 |

结语

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