動畫-animation

動畫css

=====================================================================================web

1.@keyframes規則chrome


2.animation屬性瀏覽器


Webkit內核的瀏覽器(Safari,chrome)須要加-webit-前綴。ide


持續時間函數

animation-duration動畫

-webkit-animation-durationurl


時間函數spa

animation-timing-functionorm

-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;}
        }
相關文章
相關標籤/搜索