神奇的CSS动画

发表于 2017-03-25 更新于 2019-10-07 分类于前端学习笔记阅读次数：

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

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

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

transition 属性

transition 是一个速记属性，有以下四个属性：

transition-property：指定 CSS 属性的 name, transition 效果；
transition-duration：transition 效果需要指定多少秒（或毫秒）才能完成；
transition-timing-function：指定 transition 效果的转速曲线，包括五个模式：ease（渐慢，默认）、linear（匀速）、ease-in（加速）、ease-out（减速）、cubic-bezier 函数（自定义速度模式，可使用工具网站定制）；
transition-delay：定义 transition 效果开始的时候。

// 简写
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 关键字定义动画的各个状态，将指定时间段内的动画划分的更为精细。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

div:hover {
    animation: 1s rainbow infinite;
}

0% 可以用 from 表示，100% 可以用 to 表示：

@keyframes rainbow {
  from { background: #c00; }
  50% { background: orange; }
  to { background: yellowgreen; }
}

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

// 以下都为合法的写法

@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 常用属性

// 简写
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：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。有四个可选值：

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

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

// 让动画保持突然终止时的状态

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/打字机动效。

参考资料

补充：