你不知道的CSS3动画

01、CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的一种效果。

我们可以改变任意多样的次数，可以用百分比（ 0% 和 100%，百分比代表的是时间）或者是用关键词 “from” 和 “to”来规定变化发生的时间。

0% 是动画的开始，100% 是动画的完成。

同时为了得到最佳的浏览器支持，我们始终定义 0% 和 100% 选择器。

、

02、CSS3 @keyframes 的规则

如果我们想要创建一个css3动画，我们需要先创建一个@keyframes动画，所以就必须得了解@keyframes的一些规则。

transition 过渡属性：它的特点是需要事件来触发。

anmition  动画属性：它的特点是不需要事件进行触发，调用关键帧即可。

animation :   它是个复合属性

animation-name—————————关键帧的名称

animation-duration————————动画的持续的时间

animation-timing-function —————动画运用的类型

属性值：

linear———————匀速运动 

ease———————-默认

ease-in——————-以低速开始

ease-out——————以低速结束

ease-in-out—————以低速开始和结束

cubic-bezier(n,n,n,n)—–数值n只能是[0,1]

step-start—————–马上跳到动画每一结束桢的状态

animation-delay—————————动画的延迟

animation-iteration-count—————动画运动的次数（默认情况下运动1次） infinite(无限循环)

animation-direction———————–运动的方向

属性值：

– reverse：反方向运行 （ 让关键帧从后往前执行 ）

– alternate：动画先正常运行再反方向运行，并持续交替运行

– alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state 

属性值：

paused：暂停

running：运动

常用的写法：

animation : 关键帧的名称 ，动画运动的时间  

linear(匀速) ：动画延迟的时间

注意 : 必须定义动画的名称和动画的持续时间，如果省略的持续时间，动画将无法运行，因为默认值是0。

制作关键帧的两种方法：

方法一：

@keyframes 关键帧名称{

from{  }

to{ }

 }

方法二：

@keyframes 关键帧名称{

0%{  开始状态 }

10%{  }

……

100%{ 结束状态 }

}

03、案例

下面给出案例的代码：

运行结果：

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流裙：前面：851 中间：231 最后：348。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

原著是一个有趣的人,若有侵权,请通知删除