CSS动画

CSS样式在多个状态中进行转换，主要组成部分是:     

1.一组定义的动画关键帧     

2.描述该动画的CSS声明

关键帧表示动画的一个状态，多个关键帧就可以形成一组动画

关键帧语法规则：

@keyframes animationname{   

 keyframes-selector{css-style}

}

animationname是当前动画的名称

keyframes-selector:是关键帧选择器

css-style:当前关键帧的动画状态

animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。

语法规则：

选择器{     

animation:name   duration   timing-function   delay   iteration-count

}

animation-name：规定@keyframes动画的名称

取值： keyframe name：规定需要绑定到选择器的keyframe的名称

none:规定无动画效果（可用于覆盖来自级联的动画)

animation-duration：规定动画完成一个周期所花费的时间

取值： time值：以秒或者毫秒计算，默认是0

animation-timing-function：规定过渡效果的时间曲线

取值： linear:规定以相同速度开始至结束的过渡效果

ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。

ease-in：规定以慢速开始的过渡效果

ease-out：规定以慢速结束的过渡效果

ease-in-out：规定以慢速开始和结束的过渡效果

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。

animation-delay：规定开始之前需要等待的时间

取值： time值：以秒或毫秒计，默认是0

animation-iteration-count：规定动画播放的次数

取值： n：定义动画播放次数的数值，默认为1

infinite：规定动画应该为无限次播放

测试代码：

 大家可以自己敲代码尝试一下动画的过程。