CSS 动画 Animation

CSS 动画可以将元素从一个CSS样式以动画的方式逐渐转换到另一个CSS样式，完成这一切完全不依赖 JavaScript 和 Flash。

相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

1.能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。

2.动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。

3.让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

在本文章中，会涉及到以下属性：

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

什么是 CSS 动画？

看下维基百科对动画的定义：

动画（英语：Animation）是一种通过定时拍摄一系列多个静止的固态图像（帧）以一定频率连续变化、运动（播放）的速度（如每秒 16 张）而导致肉眼的视觉残象产生的错觉——而误以为图画或物体（画面）活动的作品及其视频技术。

CSS 动画让元素逐渐的从一种样式变为另一种样式。

要使用 CSS 动画，首先必须为动画设置一些关键帧。关键帧保存元素在特定时间将具有的样式。

@keyframes 规则

关键帧 @keyframes 规则通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤。和过渡 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

使用动画的步骤一般是：

1.使用 @keyframes 定义一个关键帧规则。

2.在元素选择器声明中通过 animation-name 属性设置关键帧规则的名称

下面，我们分 2 步实现一个 <div> 元素的背景色在 4 秒时间类从红色变为黄色这样的动画。

2.1.首先定义一个动画的关键帧规则，名称为 red_to_yellow， from 定义了元素的初始样式， to 定义了元素的最终样式。

@keyframes red_to_yellow { from { background-color: red; } to { background-color: yellow; } }

2.2将动画的关键帧规则赋予 <div> 元素。通过 animation-name 设置关键帧规则名称，通过 animation-duration 设置动画时长。

div { 
width: 100px; 
height: 100px; 
background-color: red; 
animation-name: red_to_yellow; 
animation-duration: 4s; 
}

例子说明

from 和 to 是动画的进度的中的开始位置和结束位置。 动画进度可以直接使用百分比。from = 0%, to = 100%。

动画时长 animation-duration 一定要大于 0，否则没有动画效果。

直接使用百分比定义关键帧规则

@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

直接使用百分比定义关键帧规则：同时改变背景色和位置

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

延迟动画

通过 animation-delay 属性设置延迟动画开始的时间，单位是秒。

开始动画之前有 2 秒的延迟：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

动画延迟允许负值。如果使用了负值 n，动画直接在第 n 秒开始播放。

使用负值的动画延迟

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

设置动画应该运行的次数

通过 animation-iteration-count 属性设置动画循环的次数。可以使用预定义的值 infinite 表示无限循环。

动画循环 3 次：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

无限循环的动画：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

设定动画播放的方向

通过 animation-direction 属性设置动画是正放、倒放还是交替循环播放。

动画方向属性可以具有以下值：

normal- 正放。这是默认的

reverse - 倒放。

alternate - 先正放，再倒放。

alternate-reverse - 先倒放，再正放。

倒放动画：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

先正放，再倒放：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

先倒放，再正放：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

设置动画的速度曲线

animation-timing-function 属性设置动画的速度曲线。

animation-timing-function 属性可以有以下值：

ease - 开始慢，中间快，结束慢（这是默认值）

linear - 自始至终速度相同

ease-in - 开始慢

ease-out - 结束慢

ease-in-out - 开始慢，结束慢

cubic-bezier(n,n,n,n) - 在三次贝塞尔函数中自定义

不同速度曲线比较：

#div1 {
  animation-timing-function: linear;
}
#div2 {
  animation-timing-function: ease;
}
#div3 {
  animation-timing-function: ease-in;
}
#div4 {
  animation-timing-function: ease-out;
}
#div5 {
  animation-timing-function: ease-in-out;
}

设置动画的填充模式

CSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于目标元素。

默认情况下，CSS 动画不会在播放开始之前或播放结束之后影响元素的原有样式。

动画填充模式属性可以具有以下值：

none - 默认值。元素在动画在开始之前或结束之后只有自身原有样式，不会使用动画任何一帧定义的样式。

forwards - 元素会在动画结束之后保留由最后一个关键帧设置的样式（取决于动画方向和动画迭代计数）

backwards - 元素会动画开始之前和延迟期间被赋予由第一个关键帧设置的样式（取决于动画方向）。

both - 同时按照 forwards 和 backwards 设定样式。

动画结束时保留最后一个关键帧的样式：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

动画开始之前被赋予第一个关键帧设置的样式值：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

动画填充模式设置为 both：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

动画速记属性

animation 是所有动画属性的简写属性，极大的方便了我们定义动画。

如下面依靠单个属性定义的动画：

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

可被下面一行 animation 属性代替：

div {
  animation: example 5s linear 2s infinite alternate;
}

浏览器对动画的支持

表中列出了完全支持动画相关属性的第一个浏览器版本。

CSS 动画属性

下表列出了@keyframes 规则和所有 CSS 动画属性：