CSS3动画

CSS3动画

CSS动画是从一种样式过渡到另一种样式的过程，下面是对使用动画的简单总结

一、定义动画

通过@keyframes定义动画，动画开始样式用0%标识（可用from代替），结束用100%标识（可用to代替），如果希望在中间一些时刻切换到指定样式，在对应百分比时刻设置样式即可，如：

@keyframes myAnimation {
    0% {background-color: pink;}
    50% {background-color: indianred;}
    100% {background-color: grey;}
}

这里定义了一个名为myAnimation的动画，开始时背景颜色为pink，中间时刻过渡成indianred，最后过渡成grey

二、使用动画

通过animation可以设置使用动画的名称，动画演示一个周期的时间，动画的延迟播放时间，播放次数等，如：

animation: myAnimation 5s 1s 10;

使用myAnimation动画，播放一轮周期为5s，延迟1s触发，播放10次

上面是简写属性，可通过下面属性单独设置：

animation-name、animation-duration、animation-delay、animation-iteration-count

除此之外，还可以通过animation-play-state属性指定运行或暂停状态，如：

/*	运行状态	*/
animation-play-state: running;
/*	暂停状态	*/
animation-play-state: paused;

关于动画更多的使用请参考：CSS3 动画 | 菜鸟教程 (runoob.com)