三、css3-動畫(animation)

時間 2021-04-17

標籤 php css html css3 web 動畫 code orm htm blog 欄目 CSS 简体版

原文原文鏈接

css3-動畫（animation）：
具備如下屬性：
一、animation-name 自定義動畫名稱
二、animation-duration 動畫指定須要多少秒或毫秒完成，默認值是0;
三、animation-timing-function 動畫的時間曲線，linear 勻速， ease 先慢後快，結束前變慢。
四、animation-delay 動畫在啓動前的延遲間隔，默認是0
五、animation-iteration-count 動畫的播放次數，默認是1
六、animation-direction 是否輪流反向播放動畫
七、animation-play-state 動畫是否正在運行或已暫停。值：paused 指定暫停動畫； running 指定正在運行的動畫，默認。

實例：本demo以平移（translate）爲例說明動畫的整個過程
html:php

<body>
        <div class="warp">
            
        </div>
</body>

css:css

.warp{
        height: 100px;
         width: 100px;
         border: 1px solid #eee;
            
            animation-name:moves;
            animation-direction:alternate;
            animation-delay: 0.2s;
            animation-duration: 5s;
            animation-play-state: paused;
            animation-iteration-count: 3;
           /*以上能夠簡寫成：*/
           animation: moves 5s linear 0.2s 3;
}

@keyframes moves{                           /*動畫名稱自定義*/
    10%{                                    /*時間點能夠任意，10%表示當時間進行到10%是元素要達到的狀態*/
        transform: translate(100px,0);       
        -ms-transform:translate(100px,0);     /*IE 9*/ 
        -moz-transform:translate(100px,0);     /* Firefox */
        -webkit-transform:translate(100px,0); /* Safari 和 Chrome */
        -o-transform:translate(100px,0);     /* Opera */
    }
    30%{                                    /*時間點能夠任意*/
        transform: translate(100px,100px);
        -ms-transform:translate(100px,100px);     /*IE 9*/ 
        -moz-transform:translate(100px,100px);     /* Firefox */
        -webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
        -o-transform:translate(100px,100px);     /* Opera */
    }
    60%{                                       /*時間點能夠任意*/
        transform: translate(0,100px);
        -ms-transform:translate(0,100px);     /*IE 9*/ 
        -moz-transform:translate(0,100px);     /* Firefox */
        -webkit-transform:translate(0,100px); /* Safari 和 Chrome */
        -o-transform:translate(0,100px);     /* Opera */
    }
    100%{                                /*時間點能夠任意*/
        transform: translate(0,0);
        -ms-transform:translate(0,0);     /*IE 9*/ 
        -moz-transform:translate(0,0);     /* Firefox */
        -webkit-transform:translate(0,0); /* Safari 和 Chrome */
        -o-transform:translate(0,0);     /* Opera */
    }
}

　　
　　
轉載於猿2048:➥《三、css3-動畫(animation)》html