CSS3中的animation动画属性简介

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

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

2、animation使用的简单例子

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

实验地址

3、讲讲@keyframes动画的建立

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

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

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

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

  

  2.此外，状态变化也能够用百分比进行标识，添加动画在每一个进度时的效果；

  

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

---

这里介绍animation的七大属性

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

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

• 写法：

  

2、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写法

  

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

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

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

• animation-delay写法

  

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

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

• animation-iteration-count写法

  

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

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

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

四个值的播放对比

• animation-direction的写法

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

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

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

三个值之间的对比

7、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;

随便作作也感受很漂亮