動畫-animation

動畫

=====================================================================================

1.@keyframes規則

2.animation屬性

Webkit內核的瀏覽器（Safari,chrome）需要加-webit-前綴。

持續時間：

animation-duration

-webkit-animation-duration

時間函數：

animation-timing-function

-webkit-animation-timing-function

延遲時間：

animation-delay

-webkit-animation-delay

動畫執行次數：

animation-iteration-count: count / infinite(無限次)

-webkit-animation-iteration-count:

動畫播放方向：

animation-direction: normal / reverse /alternate / alternate-reverse

                           //正常 / 反向 / 第一次正常第二次反向 / 第一次反向第二次正常

-webkit-animation-direction：

動畫播放前后的狀態：

animation-fill-mode: none / backwards / forwards /both

  // 默認值 / 設置播放之前的元素狀態和第一個關鍵幀相同 / 播放后的

                                                                  狀態和最后一個關鍵幀相同

-webkit-animation-fill-mode:

控制動畫運行或暫停：

animation-play-state: running / paused

-webkit-animation-play-state  

*****************************************************************************************

所有和animation相關的樣式都可以寫在animation屬性內:

    但 1. 至少要有animation-name 和 animation-duration

       2. animation-duration在animation-delay之前

     div{
            height:100px;
            width:100px;
            background: url(p_w_picpaths/ball.png);
            background-size:99.5%;
            animation:myball_1 6s linear infinite alternate, myball_2 6s linear infinite;
            -webkit-animation:myball_1 6s linear infinite alternate, myball_2 6s linear infinite;
            animation-play-state:running;
            -webkit-animation-play-state:running;
        }
        div:hover{
            animation-play-state:paused;
            -webkit-animation-play-state:paused;
        }
        @keyframes myball_1{
            100%{ transform :rotate(360deg);}
        }
        @-webkit-keyframes myball_1{
                    100%{transform:rotate(360deg);}
        }
        @keyframes myball_2{
            0%,50%,100%{ opacity :1;}
            25%,75%{ opacity:0 ;}
        }
        @-webkit-keyframes myball_2{
                    0%,50%,100%{opacity:1;}
                    25%,75%{opacity:0;}
        }