CSS3中的animation动画属性简介

在CSS3中，有一个新的属性可以用来做一些简单的动画效果，这就是animation，中文意思就是动画。

一、首先我们来看看animation属性的兼容性（来源caniuse）

animation属性兼容

二、animation使用的简单例子

在这个例子中，我让一个从左移动到右，再移动回左边：
代码如下：

div移动

实验地址

三、讲讲@keyframes动画的创建

• 介绍
  在使用animation为元素制作动画时，先要制定想要的动画效果，例如让div元素移动，又或者改变它的背景色，实现翻转效果等，这时候就要用到@keyframes为其创建动画的效果；

• @keyframes的写法
  总的格式如下：

  @keyframes 动画的名字{
  这里制定元素变化的效果
  }

• @keyframes的几个关键词
  1.from和to，标记元素的起始状态和结束状态，例如下面例子，元素的起始背景色是红色，使其慢慢变成蓝色就可以这样写；
  

  

  from和to
  
  2.此外，状态变化也可以用百分比进行标识，添加动画在每个进度时的效果；
  
  

  百分比表示动画效果进度

PS：在 @keyframes中填写动画效果，结束是不能添加分号;的，否则没有效果，下面这个是错误的写法：

错误写法

---

这里介绍animation的七大属性

一、animation-duration属性（持续时间）

• 介绍
  animation-duration是为动画制定持续的时间，一般以秒或者毫秒来计算，如果不填写该属性，则默认为0，没有动画效果；

• 写法：

  
  
  

二、animation-timing-function属性（时间曲线）

• 介绍
  animation-timing-function属性是为动画制定从开始到结束时的播放速度曲线，比如由快到慢，或者由慢到快等；

• animation-timing-function的几个值
  1.linear：表示动画一直以匀速进行播放；贝赛尔函数cubic-bezier(0,0,0.25,1)
  2.ease：默认值，表示动画先慢后快，在即将结束时再变慢；cubic-bezier(0.25,0.1,0.25,1)
  3.ease-in：动画由慢到快直至结束；cubic-bezier(0.42,0,1,1)
  4.ease-out：动画由快到慢直至结束；cubic-bezier(0,0,0.58,1)
  5.ease-in-out：动画由慢到快再到慢直至结束，与ease不同的是它均等得分为三份，而ease是只在结束时变慢；cubic-bezier(0.42,0,0.58,1)
  6.标注时间：也可以直接标注一个时间(以s做单位)来规定动画全称以该速度进行播放；
  7.贝赛尔函数：也可以使用贝赛尔函数来对动画的播放时间曲线进行规定；
  关于贝赛尔函数点这里
  这里是五个不同动画之间的效果对比：
  效果对比

• animation-timing-function写法
  

  

  animation-timing-function

三、animation-delay属性（动画延迟时间）

• 介绍
  delay顾名思义是延迟的意思，该属性作用就是规定动画延迟多少时间进行播放的，以秒或者毫秒做单位，默认值为0，可以设置负数，设置负数时候，动画直接跳过负数时间段进行执行，例如：动画只有5s，设置该属性的值为-2s的时候，动画是直接从第三秒的位置开始的；

• animation-delay负值与正值的对比
  实验地址

• animation-delay写法
  

  

  animation-delay写法

四、animation-iteration-count属性（动画播放次数）

• 介绍
  iteration-count这个连接词中，iteration的意思是反复，count的意思是次数。该属性制定动画的播放次数，默认是1，也就是播放一次，填写数字几就是播放几次，此外，还有值infinite是无限循环的意思；

• animation-iteration-count写法
  

  

  动画播放次数

五、animation-direction属性（动画反向播放）

• 介绍
  该属性中，direction是方向的意思，该属性制定动画是否反方向播放，以及怎么样进行播放；

• animation-direction的四个值
  1.normal：默认值，不进行反方向播放；
  2.reverse：全部播放都是用反方向播放；
  3.alternate：在奇数次数（1、3、5）的时候正向播放，偶数次数（2、4、6）进行反向播放；
  4.alternate-reverse：在偶数次数（1、3、5）的时候正向播放，奇数次数（2、4、6）进行反向播放；

四个值的播放对比

• animation-direction的写法

animation-direction写法

六、animation-fill-mode属性（动画保持开始或者结束时的样式）

• 介绍
  animation-fill-mode属性制定动画是否保持开始时的样式，或者是结束时的样式，又或者两者皆有，比如在一次播放结束后，动画保持什么样的样式；

• animation-fill-mode属性的三个值
  1.forwards：动画结束后保持结束时的样式；
  2.backwards：动画结束后保持开始时的样式；
  3.both：两者皆有；

三个值之间的对比

七、animation-play-state属性（暂停动画）

• 介绍
  animation-play-state属性制定动画的运行状态，是运行还是暂停；

• animation-play-state属性的两个值
  1.paused：动画暂停；
  2.running：动画运行；

• 例子：点击按钮暂停动画或开始动画
  暂停或运行动画

---

最后说说animation的简写形式

格式如下：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation属性简写

随便做做也感觉很漂亮