1、要想用css 完成一个动画，那么先来声明一个动画:
/*
* 要支持不同的浏览器请在 @keyframes / animation 前面添加前缀
* Safari 与 Chrome: -webkit-
* 火狐：-moz-
*/
@keyframes 动画名 {
从{css 样式 ( 可以写多个样式 ) }
到{css 样式}
}
// 例
@keyframes customAnimation {
from {width: 100px;}
to {width: 200px}
}
2、开始使用动画
div {
//
animation-name: customAnimation; // 该div 绑定的要执行的动画名
animation-duration: 2s; // 动画执行时长
animation-timing-function: ease; // 动画的执行速度
animation-delay: 2s; // 多长时间后开始执行动画
animation-iteration-count: 3; // 动画的播放次数
animation-direction: alternate; // 反向动画
animation-play-state: paused; //动画是暂停 或播放
}
