CSS3关键帧动画&&过渡动画

关键帧动画

创建的两种方式：
1、

2、

其中的百分比代表着在什么时间段要实现什么样的效果，可以根据自己的需求进行更改时间段，0%和100%这两个关键帧是必须要定义的。0%可以由from代替，100%可以由to代替。

animation-name：none为默认值，将没有任何动画效果，其可以用来覆盖任何动画。

animation-duration：默认值为0s，意味着动画周期为0s，也就是没有任何动画效果。

animation-timing-function：与transition-timing-function一样。

animation-delay：在开始执行动画时需要等待的时间。

animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放。

animation-direction：默认为nomal，每次循环都是向前播放，（0-100）。另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放。

animation-state：默认为running，播放，paused，暂停。

animation-fill-mode：定义动画开始之前和结束之后发生的操作。none（默认值），动画结束时回到动画没开始时的状态；

forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；

backwards，让动画回到第一帧的状态；

both：轮流应用forwards和backwards规则；

***只要把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。

过渡动画

初始状态过渡到结束状态这个过程中所产生的动画。

transition-property：规定对哪个属性进行过渡。

transition-duration：定义过渡的时间，默认是0。

transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等。
linear 规定以相同速度开始至结束的过渡效果(等cubic-bezier(0,0,1,1))。

ease(默认值)规定慢速开始，然后变快，然后慢速结束的过渡效果

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

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

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

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0。

要在同一代码块中定义元素初始状态（样式），添加transition属性。
如果想要同时过渡多个属性，可以用逗号隔开。

transition简单易用，但是它有几个问题 ：
1、transition需要事件触发，所以没法在网页加载时自动发生。
2、transition是一次性的，不能重复发生，除非一直触发。
3、transition只能定义开始状态和结束状态，不能定义中间状态，只有头和尾