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; //动画是暂停 或播放
}