css3-逐幀動畫

時間 2019-11-26

標籤 css3 css 動畫欄目 CSS 简体版

原文原文鏈接

time，這裏有兩個時間，前面一個是規定完成這個動畫所須要的時間，全稱叫animation-duration，第二個time爲動畫延遲開始播放的時間，全稱叫animation-delay，這兩個數值能夠用秒’s’也能夠用微秒’ms’來寫，1000ms=1s，這個不用一一介紹。css

ease：動畫緩慢開始，接着加速，最後減慢，默認值;
linear：動畫從頭至尾的速度是相同的;
ease-in：以低速開始；
ease-out：以低速結束；
ease-in-out：動畫以低速開始和結束；

說說這個 steps(n,[ start | end ] ]?)這個階梯函數，這個函數能夠把動畫平均劃分爲基本相等的，這個n是一個天然數，意思就是把一個動畫平均分紅n等分，直到平均地走完這個動畫，這個要跟linear區別開來，由於linear是把動畫做爲一個總體，中間沒有斷點，而steps是把動畫分段平均執行開來。step-start等同於steps(1,start)，動畫分紅1步，動畫執行時爲開始左側端點的部分爲開始；step-end等同於steps(1,end)：動畫分紅一步，動畫執行時以結尾端點爲開始，默認值爲end。對此，w3c圖解以下：
css3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3 逐幀動畫</title>
    <style>
        .fly{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 126px;/*單個畫面圖片寬度*/
            height: 184px;
            background: url(ren.png) no-repeat;/*圖片寬度是126*3*/
            
            /*-webkit-animation: run 500ms steps(1) infinite 0s;*/
            
            -webkit-animation: run2 500ms steps(2) infinite 0s;
        }
        /* 動畫方式一 */
        @-webkit-keyframes run{

            0%{
                background-position: 0px;
            }
            25%{
                background-position: -126px 0;
            }
            50%{
                background-position: -252px 0;
            }
            100%{
                background-position: 0px;
            }
        }
        /* 動畫方式二 */
        @-webkit-keyframes run2{

            50%{
                background-position: -252px 0;
            }
        }
    </style>
</head>
<body>
    <span class="fly"></span>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。