css動畫：animation的常用樣式

animation動畫

定義一個動畫：

/*設定一個關鍵幀，定義動畫每一步執行的動作*/
@keyframes mybox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform: translate(0,0);}
        }
           

/*引用關鍵幀，設定動畫的執行樣式*/
animation: mybox 5s 1s infinite;
           

注：1、動畫結束後回到初始位置。
    2、from->0%    to ->100%
           

animation-name: 動畫的名字，（必須存在）

animation-duration: 動畫持續的時間

animation-delay:規定多長時間後出現動畫效果

animation-iteration-count: 定義動畫執行的次數

預設值是：1； 無限次數：infinite
           

animation-timing-function: 定義動畫的效果

animation-fill-mode:

none:預設值；  樣式在延遲之後生效；
        backwards：  樣式在延遲之前生效；
        forwards： 在動畫結束之後，停在終點位置；
        both:  具備backwards和forwards的特性；