CSS 3アニメーション

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; //         
}