深刻了解css3動畫以及幀動畫

時間 2019-11-29

標籤深刻瞭解 css3 css 動畫以及欄目 CSS 简体版

原文原文鏈接

前言

初篇:css

從前端網轉戰掘金，之後當與各位大神看齊，一塊兒學習進步，共同成長!
複製代碼

css動畫

Transform：對元素進行變形；html

Transition：對元素某個屬性或多個屬性的變化，進行控制（時間等），相似flash的補間動畫。但只有兩個關鍵貞。開始，結束。前端

Animation：對元素某個屬性或多個屬性的變化，進行控制（時間等），相似flash的補間動畫。能夠設置多個關鍵貞。css3

Transition與Animation:

transition須要觸發一個事件 ,而animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果。bash

這幾個屬性構成了 CSS3 豐富多彩的動畫世界。css3動畫

transition
transform
animation
複製代碼

transition的侷限

transition的優勢在於簡單易用，可是它有幾個很大的侷限。

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。wordpress

（2）transition是一次性的，不能重複發生，除非一再觸發。函數

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。學習

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。測試

animation-timing-function與transition-timing-function屬性是同樣的

重要的是貝塞爾曲線是由兩個xy軸座標拉的加速度曲線值 cubic-bezier.com

1)、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2)、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3)、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

4)、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

5)、ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

6)、cubic-bezier：（該值容許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效。
複製代碼

關於css3動畫其餘更詳細的介紹，參考其餘大佬總結

借鑑大佬總結:

www.zhangxinxu.com/wordpress/2…

www.cnblogs.com/jingwhale/p…

幀動畫

在應用 CSS3 漸變/動畫時，有個控制時間的屬性<timing-function> 。它的取值中除了經常使用到的三次貝塞爾曲線之外，還有個讓人比較困惑的 steps() 函數。

steps() 第一個參數 number 爲指定的間隔數（必須是正整數），即把動畫分爲 n 步階段性展現，第二個參數默認爲 end，設置最後一步的狀態，start 爲結束時的狀態，end 爲開始時的狀態。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>spirit動畫</title>
        <link rel="stylesheet" href="">
        <style>
        .bird{background: url(https://cdn.files.qdfuns.com/note/content/picture/201905/28/145522gd9yxe94l5px8222.jpg) -100% 0;
        width: 140px;
        height:85px;
        animation: bird 4s steps(1,end) 1 forwards ;
         }
        @keyframes bird{
           0% {
            background-position: 0 0;
            }
            10%{
                background-position: -100% 0;
            }
            20%{
                background-position: -200% 0;
            }
            30%{
                background-position: -300% 0;
            }
            50%{
                background-position: 0 100%;
            }
            60%{
                background-position: -100% 100%;
            }
            70%{
                background-position: -200% 100%;
            }
            80%{
                background-position: -300% 100%;
            }
            90%{
                background-position: 0 0;
            }
            100%{
                background-position: -100% 0;
            }

        }
        </style>
    </head>
    <body>
        <div class="bird"></div>
    </body>
</html>
複製代碼

經測試，雙排圖片用steps(1)這樣一幀去寫，若是設計圖是單排的話,如:

的話，能夠用steps(10)去寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi{
            width: 50px;
            height: 72px;
            background-image: url("https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png");
            /*深度理解
            *整個動畫1s完成。
            *這裏1s要移動500的像素，這1s要有十步走完，每步是平均下來是0.1s，
            *每步比上一步多走了72px的位置，這個走是瞬間走到的。
            *end表示每一步在接近0.1s再去走
            */
            animation: play 1s steps(10) infinite;
        }
        /*定義動畫*/
        @keyframes play {
            from { background-position:    0px 0px; }
            to { background-position: -500px 0px; }
        }
    </style>
</head>
<body>
<img src="https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png" alt="此圖片是500*72，主要是爲了顯示做用">
<div class="hi"></div>

</body>
</html>
複製代碼

相關標籤/搜索

每日一句

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