CSS3動畫理解與應用

時間 2019-11-30

標籤 css3 css 動畫理解應用欄目 CSS 简体版

原文原文鏈接

CSS3動畫理解與應用

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

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

上次學習了變形Transform，下面看動畫。html

一.Transition

css的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。git

語法:github

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>

[, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四個屬性值：瀏覽器

執行變換的屬性：transition-property,安全

變換延續的時間：transition-duration,ide

在延續時間段，變換的速率變化transition-timing-function,函數

變換延遲時間transition-delay。工具

下面分別來看這四個屬性值學習

1.transition-property

語法：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有如下幾個值：

none(沒有屬性改變)；

all（全部屬性改變）這個也是其默認值；

indent（元素屬性名）。

當其值爲none時，transition立刻中止執行，當指定爲all時，則元素產生任何屬性值變化時都將執行transition效果，ident是能夠指定元素的某一個屬性值。其對應的類型以下：

一、color: 經過紅、綠、藍和透明度組件變換（每一個數值處理）如：background-color,border-color,color,outline-color等css屬性；

二、length: 真實的數字如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；

三、percentage:真實的數字如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；

四、integer離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換爲整數時發生如：outline-offset,z-index等屬性；

五、number真實的（浮點型）數值，如：zoom,opacity,font-weight,等屬性；

六、transform list:詳情請參閱：《CSS3 Transform》

七、rectangle:經過x, y, width 和 height（轉爲數值）變換，如：crop

八、visibility: 離散步驟，在0到1數字範圍以內，0表示「隱藏」，1表示徹底「顯示」,如：visibility

九、shadow: 做用於color, x, y 和 blur（模糊）屬性,如：text-shadow

十、gradient: 經過每次中止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的中止數值以便執行動畫,如：background-image

十一、paint server (SVG): 只支持下面的狀況：從gradient到gradient以及color到color，而後工做與上面相似

十二、space-separated list of above:若是列表有相同的項目數值，則列表每一項按照上面的規則進行變化，不然無變化

1三、a shorthand property: 若是縮寫的全部部分均可以實現動畫，則會像全部單個屬性變化同樣變化

border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer

這裏須要提醒一點是，並非什麼屬性改變都爲觸發transition動做效果，好比頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。但上述所示的屬性類型改變都會觸發一個transition動做效果。

2.transition-duration:

語法：

transition-duration ： <time> [, <time>]*

transition-duration是用來指定元素轉換過程的持續時間，取值：<time>爲數值，單位爲s（秒）或者ms(毫秒),能夠做用於全部元素，包括:before和:after僞元素。其默認值是0，也就是變換時是即時的。

3.transition-timing-function:

語法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out |
 cubic-bezier(<number>, <number>, <number>, <number>) 
[, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值：

transition-timing-function的值容許你根據時間的推動去改變屬性值的變換速率，transition-timing-function有6個可能值：

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]區域內，不然無效。

其是cubic-bezier爲經過貝賽爾曲線來計算「轉換」過程當中的屬性值，以下曲線所示，經過改變P1(x1, y1)和P2(x2, y2)的座標能夠改變整個過程的Output Percentage。初始默認值爲default。可以使用網站工具。

其餘幾個屬性的示意圖：

4.transition-delay:

語法：

transition-delay ： <time> [, <time>]*

transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，其取值：<time>爲數值，單位爲s（秒）或者ms(毫秒)，其使用和transition-duration極其類似，也能夠做用於全部元素，包括:before和:after僞元素。默認大小是"0"，也就是變換當即執行，沒有延遲。

有時咱們不僅改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果，那麼咱們只要把幾個transition的聲明串在一塊兒，用逗號（「，」）隔開，而後各自能夠有各自不一樣的延續時間和其時間的速率變換方式。但須要值得注意的一點：transition-delay與transition-duration的值都是時間，因此要區分它們在連寫中的位置，通常瀏覽器會根據前後順序決定，第一個能夠解析爲時間的怭值爲transition-duration第二個爲transition-delay。

5.簡寫

綜合上述咱們能夠給transition一個速記法：transition: <property> <duration> <animation type> <delay>以下圖所示：

經過上面，我想你們對CSS3的Transition屬性的使用有必定的概念存在了，下面咱們舉個例子來加強transition的記憶。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css transition</title>
    <style>
    *{
        margin: 0;
        padding:0;
    }
        .m-demo{
            width: 600px;
            height: 100px;
            outline:2px dashed;
            margin: 20px auto;
            position: relative;
            background-color: #B9C78F;
        }
        .m-demo pre{
            transition:2s;width: 100px;height: 100px;padding: 0;line-height: 100px;border-radius: 50%;font-size: 20px;text-align: center;border: 1px solid #000;position: absolute;top:0;left:0;color: #fff;background-color: #8BA243;
        }
        .m-demo:hover pre{left: 500px;color: #000;}
        .m-demo-1 pre{transition-property:none;}
        .m-demo-2 pre{transition-property:all;}
        .m-demo-3 pre{transition-property:left;}
        .m-demo-4 pre{transition-property:left,color;}
    </style>
</head>
<body>
    <div class="m-demo m-demo-1">
        <pre>none</pre>
    </div>

    <div class="m-demo m-demo-2 .prehover">
        <pre>all</pre>
    </div>

    <div class="m-demo m-demo-3">
        <pre>left</pre>
    </div>

    <div class="m-demo m-demo-4">
        <pre>left&color</pre>
    </div>
</body>
</html>

效果以下：

6.transition的使用注意

（1）目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，因此transition已經能夠很安全地不加瀏覽器前綴。
（2）不是全部的CSS屬性都支持transition，完整的列表查看這裏，以及具體的效果。
（3）transition須要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。好比，height從0px變化到100px，transition能夠算出中間狀態。可是，transition無法算出0px到auto的中間狀態，也就是說，若是開始或結束的設置是height: auto，那麼就不會產生動畫效果。相似的狀況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

7.transition的侷限

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

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。
（2）transition是一次性的，不能重複發生，除非一再觸發。
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

CSS Animation就是爲了解決這些問題而提出的。

二.Animation

1.動畫屬性以下：

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
animation-delay	規定動畫什麼時候開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode	規定對象動畫時間以外的狀態。

2.咱們從建立CSS動畫的基本要素開始。任何CSS動畫中都有兩個主要的部分：

定義動畫
將其賦給指定的HTML元素（或元素）。

3.定義動畫（@keyframes 規則）

1）定義一個名爲drive的動畫：

@keyframes drive {

}

2）定義關鍵幀

動畫是由關鍵幀組成的！在@keyframes聲明中，咱們有兩種方法來對它進行定義：關鍵字from 和 to；或百分比。

很是簡單的動畫可能只是把一個對象從一個地方移動到另外一個地方。在這種狀況下，關鍵字from 和 to很是適合來定義關鍵幀。

@keyframes drive {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(400px);
    }
}

用百分比定義關鍵幀，從0%關鍵幀開始，以100%做爲結束。0%到100%之間的任何數字均可以定義關鍵幀，因此使用百分比有很是大的靈活性。固然，若是你喜歡的話，你也能夠將百分比和from(至關於0%)、to(至關於100%)混合使用。

@keyframes drive {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(200);
    }
    100% {
        transform: translateX(400px);
    }
}

此外，你沒必要按照嚴格的升序排列來列出百分比。一個0%的關鍵幀仍然會被認爲是動畫的第一個關鍵幀，即便它不是按照順序排列的。

4.將動畫賦給HTML元素

一旦建立了關鍵幀聲明塊，就須要準備把動畫賦給一個HTML元素或其它元素。咱們還須要爲HTML元素定義一個簡短的屬性列表，好比img元素，爲它應用咱們剛纔建立的動畫。

1)animation-name

規定 HTML元素@keyframes 動畫的名稱。如：

animation-name: drive;

2)animation-duration

規定動畫完成一個週期所花費的秒或毫秒。默認是 0。如：

animation-duration: 2s;

設置了這兩個屬性以及咱們剛纔定義的關鍵幀，咱們才能夠看到動畫。

完整的CSS是這樣寫的：

.car {
    animation-name: drive;
    animation-duration:1s;
}

@keyframes drive {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(400px);
    }
}

3)animation-timing-function

animation-timing-function 規定動畫的速度曲線。

速度曲線定義動畫從一套 CSS 樣式變爲另外一套所用的時間。

速度曲線用於使變化更爲平滑。

animation-timing-function 使用名爲三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您可以在該函數中使用本身的值，也能夠預約義的值：

演示地址

linear    動畫從頭至尾的速度是相同的。
ease    默認。動畫以低速開始，而後加快，在結束前變慢。
ease-in    動畫以低速開始。
ease-out    動畫以低速結束。
ease-in-out    動畫以低速開始和結束。
cubic-bezier(n,n,n,n)    在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。可以使用網站工具。

對於咱們簡單的小車示例，我把"timing function"值設置爲ease-in：

animation-time-function: ease-in;

4)animation-iteration-count

animation-iteration-count 屬性定義動畫的播放次數。

語法：animation-iteration-count: n|infinite;

n 定義動畫播放次數的數值；infinite 規定動畫應該無限次播放。

咱們已經瞭解了CSS動畫最基礎的內容。它涵蓋了很是多的內容，可是你很快很發現動畫有不一樣的層，當你在完善動畫的同時還想節省時間的時候，你就須要有更多幫助你控制動畫的東西了。

5）animation-delay

animation-delay 屬性定義動畫什麼時候開始。

animation-delay 值以秒或毫秒計。

提示：容許負值，-2s 使動畫立刻開始，但跳過 2 秒進入動畫。

等待兩秒，而後開始動畫：

animation-delay: 2s;

你可能注意到了，在動畫結束的時候，咱們的球會回到原來的位置。這不是結束一個動畫最理想的方式。當你的對象在屏幕上移動，你可能但願它能停在結束的位置，而不是回到原來的位置。這就是animation-fill-mode能夠完成的東西。

巧妙地設置animation-delay屬性的值可讓咱們完成多動畫效果。下面會講。

6)animation-fill-mode

animation-fill-mode 屬性規定動畫在播放以前或以後，其動畫效果是否可見。

註釋：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。

語法
animation-fill-mode : none | forwards | backwards | both;

none    不改變默認行爲。
forwards    當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards    在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。
both    向前和向後填充模式都被應用。它是forwards和backwards的結合。動畫能夠在開始前就已是第一個關鍵幀的樣式，而後，在動畫完成後，保持最後一個關鍵幀的樣式。

設置過animation-delay，再設置backwards

animation-fill-mode: backwards;

會產生如下效果：

7）animation-direction

animation-direction 屬性定義是否應該輪流反向播放動畫。

若是 animation-direction 值是 "alternate"，則動畫會在奇數次數（一、三、5 等等）正常播放，而在偶數次數（二、四、6 等等）向後播放。

註釋：若是把動畫設置爲只播放一次，則該屬性沒有效果。

默認狀況是，animation-direction等於normal。此外，還能夠等於取alternate、reverse、alternate-reverse等值。它們的含義見下圖（假定動畫連續播放三次）。

8)animation-play-state

animation-play-state 屬性規定動畫正在運行仍是暫停。

註釋：您能夠在 JavaScript 中使用該屬性，這樣就能在播放過程當中暫停動畫。

語法
animation-play-state: paused|running;

paused 規定動畫已暫停。
running 規定動畫正在播放。默認值是running。

注：JavaScript 語法：object.style.animationPlayState="paused"

鼠標懸停的時候，標籤就旋轉；鼠標離開的時候，就中止旋轉

body {
    padding:4em; 
    background: #fcfcfc;
}

.wrap {
    width:200px; 
    margin:auto; 
    position:relative;
}

.msg {
    color: whitesmoke;
    text-align: center;
    font-family: serif;
    font-size: 3.5em;
    width: 200px;
    position: absolute;
    margin: 55px 0 0 2px;
    pointer-events: none;
}

.sticker {
    width: 200px;
    height: 200px;
    position: absolute;
    background: url(../images/sticker.png) top center no-repeat;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

.sticker:hover {
    animation-play-state: running;
}

@keyframes spin { 
    100% {transform: rotate(1turn); } 
}

9)簡寫

W3C目前定義的簡寫順序是這樣的：

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animationiteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

要使用簡寫在一個元素中定義多個動畫，你須要使用逗號來分隔每一個動畫的屬性值。好比在一個元素中定義兩個動畫須要這樣寫：

animation: myAnimation 1s ease-in-out 2s 4, myOtherAnimation 4s ease-out 2s;

注：時間順序在定義每一個動畫的時候都是很是重要的：第一個值解析爲動畫持續的時間，第二個值解析爲動畫延遲的時間。

5.多個動畫，一個對象

目前爲止，咱們討論的都是爲單個元素應用單個動畫，可是咱們能夠爲對象添加不止一個動畫，只要咱們須要。最多見的方法是動畫一前一後，這樣動畫就能夠一個輪着一個播放。巧妙地設置animation-delay屬性的值可讓咱們用純CSS來完成這個效果。

咱們讓一個小獎章從左邊滾入，而後在到達指定的位置前進行縮放。

6.實用示例

1）會動的播放按鈕，演示地址

2）向下滑動按鈕，演示地址

3)簡單的練習 https://github.com/jingwhale/CSS3-dynamic-cue-effect 演示地址

-------------------------------------------------------------------------------------------------------------------------------------

完

CSS3變形理解與應用

轉載需註明轉載字樣，標註原做者和原博文地址。

相關標籤/搜索

每日一句

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