知識點：
CSS3動畫
CSS3 animation
CSS3 @keyframes
CSS3 will-change

一、CSS3動畫

使元素從一種樣式逐漸變化為另一種樣式的效果。

動畫（animation）

anima——靈魂、animate——賦予生命
動畫可以定義為使用繪畫的手法，創造生命運動的藝術。

視覺暫留原理

人類具有“視覺暫留”的特性，人的眼睛看到一幅畫或一個物體后，在0.34秒內不會消失。

動畫原理

通過把人物的表情、動作、變化等分解后畫成許多動作瞬間的畫幅，利用視覺暫留的原理，在一幅畫還沒有消失前播放下一幅畫，就會給人造成一種流暢的視覺變化效果。

【兼容性】
IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）

二、CSS3 animation

1/animation-name屬性

檢索或設置對象所應用的動畫名稱。

【語法】

animation-name: keyframename| none;

【參數說明】
keyframename：指定要綁定到選擇器的關鍵幀的名稱；
none：指定有沒有動畫. （可用于覆蓋從級聯的動畫）。

2/animation-duration屬性

檢索或設置對象動畫的持續時間

【語法】

animation-duration:time;

【參數說明】
time指定動畫播放完成花費的時間。默認值為0，意味著沒有動畫效果

3/animation-timing-function屬性

檢索或設置對象動畫的過渡類型

【語法】

animation-timing-function:
ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|
steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, 
<number>, <number>);

【參數說明】

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：默認。平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start：等同于steps(1, start)
step-end：等同于steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的
步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認
值為end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

【備注】：step-start、step-end、steps(<integer>[,[start|end]]?)使用比較少

4/animation-delay屬性

檢索或設置對象動畫的延遲時間。

【語法】

animation-delay:time;

【參數說明】
可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值為0。

5/animation-iteration-count屬性

檢索或設置對象動畫的循環次數。

【語法】

animation-iteration-count:infinite|<number>;

【參數說明】
<number>為數字，其默認值為"1";infinite為無限次數循環。

6/animation-direction屬性

檢索或設置對象動畫在循環中是否反向運動。

【語法】

animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;

【參數說明】
normal：正常方向。默認值；
reverse：反方向運行；
alternate：動畫先正常運行再反方向運行，并持續交替運行；
alternate-reverse：動畫先反運行再正方向運行，并持續交替運行。

☆【備注】alternate和alternate-reverse必須配合循環animation-iteration-count（）屬性，才能實現效果。

7/animation-fill-mode屬性

規定當動畫不播放時（當動畫完成或當動畫有延遲未開始播放時），要應用到元素的樣式。

【語法】

animation-fill-mode:none|forwards|backwards|both|initial|inherit;

【參數說明】
none：默認值。不設置對象動畫之外的狀態；
forward：設置對象狀態為動畫結束時的狀態；
backwards:設置對象狀態為動畫開始時的狀態；
both：設置對象狀態為動畫結束或開始的狀態。

8/animation-play-state屬性

指定動畫是否正在運行或已暫停。

【語法】

animation-play-state:paused|running;

【參數說明】
paused：指定暫停動畫；
running：默認值，指定正在運行的動畫。

【案例】本來是paused鼠標移入變小手，開始動畫，效果如下：

animation-play-state.gif

【參考答案】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-play-state</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation-name: circle_middle;
            animation-name: circle_middle;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation-name: circle_outer;
            animation-name: circle_outer;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(0deg);   }
    to   { transform: rotateY(360deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(0deg);   }
    to   { transform: rotateZ(360deg); }
}
div:hover > div {
    cursor: pointer;
    -webkit-animation-play-state: running;
            animation-play-state: running;
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

●animation屬性

復合屬性。檢索或設置對象所應用的動畫特效。

【語法】

animation:name duration timing-function delay iteration-count direction fill-mode play-state;

【備注】☆name/duration是必需的。只要有一個時間，默認第一個優先是duration，其次才是delay。

【綜合案例】：

我們平時可以見到有一些滾屏網頁都有一個提示滾屏箭頭動畫效果，比如當我們打開這樣一個滾屏頁面的時候，網頁底部就會有一個向下的箭頭來回移動提醒我們下滑屏幕。那么我們也來嘗試一下吧。

效果圖如下：

【任務】
1、創建一個div，用css控制其大小、字體，輸入“>”并翻轉90°讓其向下，控制位置為網頁底部居中。

2、創建向下移動動畫關鍵幀。

3、設置動畫為無限循環，每一次延遲.5s。
【參考答案】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9</title>
    <style type="text/css">
        div {
            font-family: Arial;
            font-size: 72px;
            font-weight: bold;
            position: fixed;
            right: 0;
            left: 0;
            width: 30px;
            height: 30px;
            margin: auto;
            transform: rotate(90deg);
            /*此處寫animation代碼*/
            -webkit-animation:down 2s linear .5s infinite alternate;   
           animation:down 2s linear .5s infinite alternate;
        }
         @keyframes down{

            from{bottom:30px;}

            to{bottom:5px;}

        }
    </style>
</head>
<body>
    <div>></div>
</body>
</html>

三、CSS3 @keyframes

Keyframes定義

關鍵幀，可以指定任何順序排列來決定Animation動畫變化的關鍵位置。

使用說明

使用@keyframes規則創建動畫，通過逐步改變從一個CSS樣式設定到另一個。在動畫過程中可以通過@keyframes規則多次更改CSS樣式的設定。

【語法】

@keyframes animationname{
  keyframes-selector{
    css-styles;
  }
}

【參數說明】
animationname：必寫項，定義animation的名稱。
keyframes-selector：必寫項，動畫持續時間的百分比，0-100%、from（0%）、to（100%）
css-styles：必寫項，一個或多個合法的CSS樣式屬性。

【例如】

@-webkit-keyframes circle_inner {
    from   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@keyframes circle_inner {
    from   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }

四、CSS3 will-change

目標

增強頁面渲染性能

CPU和GPU

CPU即中央處理器，解釋計算機指令以及處理計算機軟件中的數據。
GPU即圖形處理器，專門處理和繪制圖形相關的硬件。GPU是專為執行復雜的數學和幾乎計算而設計的，有了它，CPU就從圖形處理的任務中解放出來，可以執行其他更多的系統任務。

硬件加速

在計算機中把計算量非常大的工作分配給專門的硬件來處理，減輕CPU的工作量。

現狀

CSS的動畫、變形、漸變并不會自動的觸發GPU加速，而是使用瀏覽器稍慢的軟件渲染引擎。
在transition，transform和animation的世界里，應該卸載進程到GPU以加快速度。
只有3D變形會有自己的layer，2D變形不會。

translateZ()（or translate3d()）Hack

為元素添加沒有變化的3D變形，騙取瀏覽器觸發硬件加速。

代價

這種情況通過向它自己的層疊加元素，占用RAM和GPU存儲空間。

●will-change

提前通知瀏覽器元素將要做什么動畫，讓瀏覽器提前準備合適的優化設置。

【語法】

will-change: auto|scroll-position|contents|<custom-ident>|<animateable-feature>;

【兼容性】
IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+

【關鍵詞說明】

auto:此關鍵字表示沒有特定的意圖，適用于它通常所做的任何啟發式和優化。
scroll-position：表示將要改變元素的滾動
位置。
contents：表示將要改變元素的內容。
<custom-ident>：明確指定將要改變的屬性與給定的名稱。
【例如】will-change：transform

-webkit-will-change: transform;
       -moz-will-change: transform;
            will-change: transform;

<animateable-feature>：可動畫的一些特征值，比如left、top、margin等。
【例如】will-change:left/top/margin等等

【注意】（切勿濫用、提前申明、remove）

end.
本筆記整理自慕課網

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS3動畫/animation/ @keyframes/will-change

CSS3動畫/animation/ @keyframes/will-change

一、CSS3動畫

動畫（animation）

視覺暫留原理

動畫原理

二、CSS3 animation

1/animation-name屬性

2/animation-duration屬性

3/animation-timing-function屬性

4/animation-delay屬性

5/animation-iteration-count屬性

6/animation-direction屬性

☆【備注】alternate和alternate-reverse必須配合循環animation-iteration-count（）屬性，才能實現效果。

7/animation-fill-mode屬性

8/animation-play-state屬性

●animation屬性

【綜合案例】：

三、CSS3 @keyframes

Keyframes定義

使用說明

四、CSS3 will-change

目標

CPU和GPU

硬件加速

現狀

translateZ()（or translate3d()）Hack

代價

●will-change

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS3動畫/animation/ @keyframes/will-change

一、CSS3動畫

動畫（animation）

視覺暫留原理

動畫原理

二、CSS3 animation

1/animation-name屬性

2/animation-duration屬性

3/animation-timing-function屬性

4/animation-delay屬性

5/animation-iteration-count屬性

6/animation-direction屬性

☆【備注】alternate和alternate-reverse必須配合循環animation-iteration-count（）屬性，才能實現效果。

7/animation-fill-mode屬性

8/animation-play-state屬性

●animation屬性

【綜合案例】：

三、CSS3 @keyframes

Keyframes定義

使用說明

四、CSS3 will-change

目標

CPU和GPU

硬件加速

現狀

translateZ()（or translate3d()）Hack

代價

●will-change

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频