神奇的CSS动画

按照传统的方式,在页面上实现动画的方式有多种,包括使用 GIF 图片、使用 JavaScript 来动态修改 DOM 的位置并加上一个定时器、使用 Flash 等。但这些方法都存在自己的问题,比如引入额外的文件会导致页面尺寸变大,这样会导致页面加载变慢,从而影响用户体验。

通过浏览器对 CSS3 标准的支持,我们不必再依赖于大尺寸的外部文件,仅凭 CSS 就可以实现动画。我以前没有机会使用,所以基本没有接触功能强大的 CSS 动画。在这篇博文中系统地总结一下,后续补充几个使用示例进一步巩固。

17.04.03 更新:补充打字机动效示例。

transition 属性

transition 是一个速记属性,有以下四个属性:

  1. transition-property:指定 CSS 属性的 name, transition 效果;
  2. transition-duration:transition 效果需要指定多少秒(或毫秒)才能完成;
  3. transition-timing-function:指定 transition 效果的转速曲线,包括五个模式:ease(渐慢,默认)、linear(匀速)、ease-in(加速)、ease-out(减速)、cubic-bezier 函数(自定义速度模式,可使用工具网站定制);
  4. transition-delay:定义 transition 效果开始的时候。
1
2
3
4
5
6
7
8
9
10
11
12
// 简写
img{
transition: 1s 1s height ease;
}
// 单独定义
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}

其中必须指定 transition-duration 属性,否则持续时间默认为 0 ,没有任何效果。

transition 的局限:

  • 需要事件触发,没法在网页加载时自动发生;
  • 一次性,除非一再触发,否则不能重复发生;
  • 只能定义开始状态和结束状态(即只有两个状态),不能定义中间状态;
  • 需要明确知道开始状态和结束状态的具体数值,才能计算中间状态;
  • 一条 transition 规则,只能定义一个属性的变化,不能涉及多个属性。

keyframes(关键帧)

animation 属性可以利用 keyframes 关键字定义动画的各个状态,将指定时间段内的动画划分的更为精细。

1
2
3
4
5
6
7
8
9
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
div:hover {
animation: 1s rainbow infinite;
}

0% 可以用 from 表示,100% 可以用 to 表示:

1
2
3
4
5
@keyframes rainbow {
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}

如果省略某个状态,浏览器会自动推算中间状态。也可将多个状态写在一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 以下都为合法的写法
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes rainbow {
to { background: yellowgreen }
}
@keyframes pound {
from,to { transform: none; }
50% { transform: scale(1.2); }
}

从一个状态向另一个状态过渡,浏览器默认为平滑过渡。steps 函数可以实现分布过渡。

1
2
3
div:hover {
animation: 1s rainbow infinite steps(10);
}

animation 常用属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 简写
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
// 单独定义
div:hover{
animation-name: rainbow;
animation-duration: 1s;
ainmation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-iteration-count: 3;
}

animation 有以下常用属性(其余和 transition 大致相似):

animation-iteration-count:指定动画播放次数,可指定为数值或 infinite(无限次)。

animation-direction:指定动画播放方向,默认为 normal。其他可选值有 reverse,alternate 和 alternate-reverse(后两种浏览器支持情况不佳)。

animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。有四个可选值:

  1. forwards:让动画停留在结束状态;
  2. none:回到动画没开始的状态;
  3. backwards:让动画回到第一帧的状态;
  4. both:根据 animation-direction 轮流应用 forwards 和 backwards 规则。

animation-play-state:指定动画播放突然终止时的状态,默认行为是跳回动画的开始状态。

1
2
3
4
5
6
7
8
9
10
// 让动画保持突然终止时的状态
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}

浏览器支持

IE 10、Firefox 16.0、Chrome 43.0、Safari 9.0、Opera 30.0 以上支持没有前缀的 animation。详见 CSS3 animation(动画) 属性 “浏览器支持”部分。

使用示例

打字机动效

依照 让页面动起来 实现的打字机动效。图片素材为自制,因此部分数据与参照有出入。素材及代码见 bighuang624/Front-end_Learning/打字机动效

参考资料

CSS动画简介 - 阮一峰的网络日志

CSS3 animation(动画) 属性

CSS 变换 过渡 动画使用案例

补充:

css3 animation 属性众妙