CSS-关键帧动画

关键帧Keyframes,用来指定动画效果的几个中间状态。
语法为：

@Keyframes colorchange {    0% {        color: red;    }    50% {        color: blue;    }    100% {        color: green;    }}

除了使用百分比，还可以使用from和to

@Keyframes colorchanges {    from {  //from代表0%        color: red;    }    to {  //from代表100%        color: green;    }}

使用animation调用动画

a:hover {    -webkit-animation: colorchange 5s ease 1s;    -moz-animation: colorchange 5s ease 1s;    -ms-animation: colorchange 5s ease 1s;    -o-animation: colorchange 5s ease 1s;    animation: colorchange 5s ease 1s;}

animation也是一个复合属性

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-count,可用值为infinite表示无穷，整数表次数
• animation-direction 动画播放方向。normal表示正常向前播放，alternate表述偶数次向前，奇数次反向。
• animation-play-state 播放状态，running表示播放，默认值。paused表示暂停播放。
• animation-fill-mode 描述动画开始和结束之后发生的操作。

属性值 效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果