CSS3動(dòng)畫(huà)/animation/ @keyframes/will-change

知識(shí)點(diǎn)：
CSS3動(dòng)畫(huà)
CSS3 animation
CSS3 @keyframes
CSS3 will-change

一治筒、CSS3動(dòng)畫(huà)

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

動(dòng)畫(huà)（animation）

anima——靈魂、animate——賦予生命
動(dòng)畫(huà)可以定義為使用繪畫(huà)的手法腐缤，創(chuàng)造生命運(yùn)動(dòng)的藝術(shù)陕赃。

視覺(jué)暫留原理

人類(lèi)具有“視覺(jué)暫留”的特性省艳，人的眼睛看到一幅畫(huà)或一個(gè)物體后，在0.34秒內(nèi)不會(huì)消失回铛。

動(dòng)畫(huà)原理

通過(guò)把人物的表情狗准、動(dòng)作克锣、變化等分解后畫(huà)成許多動(dòng)作瞬間的畫(huà)幅，利用視覺(jué)暫留的原理腔长，在一幅畫(huà)還沒(méi)有消失前播放下一幅畫(huà)袭祟，就會(huì)給人造成一種流暢的視覺(jué)變化效果。

【兼容性】
IE10+捞附、FireFox16+巾乳、Chrome43+、Safari9+鸟召、Opera30+胆绊、Android（-webkit-）

二、CSS3 animation

1/animation-name屬性

檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)名稱(chēng)欧募。

【語(yǔ)法】

animation-name: keyframename| none;

【參數(shù)說(shuō)明】
keyframename：指定要綁定到選擇器的關(guān)鍵幀的名稱(chēng)压状；
none：指定有沒(méi)有動(dòng)畫(huà). （可用于覆蓋從級(jí)聯(lián)的動(dòng)畫(huà)）。

2/animation-duration屬性

檢索或設(shè)置對(duì)象動(dòng)畫(huà)的持續(xù)時(shí)間

【語(yǔ)法】

animation-duration:time;

【參數(shù)說(shuō)明】
time指定動(dòng)畫(huà)播放完成花費(fèi)的時(shí)間跟继。默認(rèn)值為0何缓，意味著沒(méi)有動(dòng)畫(huà)效果

3/animation-timing-function屬性

檢索或設(shè)置對(duì)象動(dòng)畫(huà)的過(guò)渡類(lèi)型

【語(yǔ)法】

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>);

【參數(shù)說(shuō)明】

linear：線性過(guò)渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：默認(rèn)还栓。平滑過(guò)渡碌廓。等同于貝塞爾曲線(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 ] ]?)：接受兩個(gè)參數(shù)的步進(jìn)函數(shù)。第一個(gè)參數(shù)必須為正整數(shù)辽聊，指定函數(shù)的
步數(shù)纪挎。第二個(gè)參數(shù)取值可以是start或end，指定每一步的值發(fā)生變化的時(shí)間點(diǎn)跟匆。第二個(gè)參數(shù)是可選的异袄，默認(rèn)
值為end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類(lèi)型玛臂，4個(gè)數(shù)值需在[0, 1]區(qū)間內(nèi)

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

4/animation-delay屬性

檢索或設(shè)置對(duì)象動(dòng)畫(huà)的延遲時(shí)間迹冤。

【語(yǔ)法】

animation-delay:time;

【參數(shù)說(shuō)明】
可選讽营。定義動(dòng)畫(huà)開(kāi)始前等待的時(shí)間，以秒或毫秒計(jì)泡徙。默認(rèn)值為0橱鹏。

5/animation-iteration-count屬性

檢索或設(shè)置對(duì)象動(dòng)畫(huà)的循環(huán)次數(shù)。

【語(yǔ)法】

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

【參數(shù)說(shuō)明】
<number>為數(shù)字，其默認(rèn)值為"1";infinite為無(wú)限次數(shù)循環(huán)莉兰。

6/animation-direction屬性

檢索或設(shè)置對(duì)象動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng)挑围。

【語(yǔ)法】

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

【參數(shù)說(shuō)明】
normal：正常方向。默認(rèn)值糖荒；
reverse：反方向運(yùn)行杉辙；
alternate：動(dòng)畫(huà)先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行寂嘉；
alternate-reverse：動(dòng)畫(huà)先反運(yùn)行再正方向運(yùn)行奏瞬，并持續(xù)交替運(yùn)行枫绅。

☆【備注】alternate和alternate-reverse必須配合循環(huán)animation-iteration-count（）屬性泉孩，才能實(shí)現(xiàn)效果。

7/animation-fill-mode屬性

規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成或當(dāng)動(dòng)畫(huà)有延遲未開(kāi)始播放時(shí)）并淋，要應(yīng)用到元素的樣式寓搬。

【語(yǔ)法】

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

【參數(shù)說(shuō)明】
none：默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫(huà)之外的狀態(tài)县耽；
forward：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)句喷；
backwards:設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)；
both：設(shè)置對(duì)象狀態(tài)為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài)兔毙。

8/animation-play-state屬性

指定動(dòng)畫(huà)是否正在運(yùn)行或已暫停唾琼。

【語(yǔ)法】

animation-play-state:paused|running;

【參數(shù)說(shuō)明】
paused：指定暫停動(dòng)畫(huà)；
running：默認(rèn)值澎剥，指定正在運(yùn)行的動(dòng)畫(huà)锡溯。

【案例】本來(lái)是paused鼠標(biāo)移入變小手，開(kāi)始動(dòng)畫(huà)哑姚，效果如下：

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屬性

復(fù)合屬性祭饭。檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)特效。

【語(yǔ)法】

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

【備注】☆name/duration是必需的叙量。只要有一個(gè)時(shí)間倡蝙，默認(rèn)第一個(gè)優(yōu)先是duration，其次才是delay绞佩。

【綜合案例】：

我們平時(shí)可以見(jiàn)到有一些滾屏網(wǎng)頁(yè)都有一個(gè)提示滾屏箭頭動(dòng)畫(huà)效果寺鸥，比如當(dāng)我們打開(kāi)這樣一個(gè)滾屏頁(yè)面的時(shí)候，網(wǎng)頁(yè)底部就會(huì)有一個(gè)向下的箭頭來(lái)回移動(dòng)提醒我們下滑屏幕品山。那么我們也來(lái)嘗試一下吧析既。

效果圖如下：

【任務(wù)】
1、創(chuàng)建一個(gè)div谆奥，用css控制其大小眼坏、字體，輸入“>”并翻轉(zhuǎn)90°讓其向下，控制位置為網(wǎng)頁(yè)底部居中宰译。

2檐蚜、創(chuàng)建向下移動(dòng)動(dòng)畫(huà)關(guān)鍵幀。

3沿侈、設(shè)置動(dòng)畫(huà)為無(wú)限循環(huán)闯第，每一次延遲.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);
            /*此處寫(xiě)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定義

關(guān)鍵幀咳短，可以指定任何順序排列來(lái)決定Animation動(dòng)畫(huà)變化的關(guān)鍵位置。

使用說(shuō)明

使用@keyframes規(guī)則創(chuàng)建動(dòng)畫(huà)蛛淋，通過(guò)逐步改變從一個(gè)CSS樣式設(shè)定到另一個(gè)咙好。在動(dòng)畫(huà)過(guò)程中可以通過(guò)@keyframes規(guī)則多次更改CSS樣式的設(shè)定。

【語(yǔ)法】

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

【參數(shù)說(shuō)明】
animationname：必寫(xiě)項(xiàng)褐荷，定義animation的名稱(chēng)勾效。
keyframes-selector：必寫(xiě)項(xiàng)，動(dòng)畫(huà)持續(xù)時(shí)間的百分比叛甫，0-100%层宫、from（0%）、to（100%）
css-styles：必寫(xiě)項(xiàng)其监，一個(gè)或多個(gè)合法的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

目標(biāo)

增強(qiáng)頁(yè)面渲染性能

CPU和GPU

CPU即中央處理器抖苦，解釋計(jì)算機(jī)指令以及處理計(jì)算機(jī)軟件中的數(shù)據(jù)毁菱。
GPU即圖形處理器，專(zhuān)門(mén)處理和繪制圖形相關(guān)的硬件睛约。GPU是專(zhuān)為執(zhí)行復(fù)雜的數(shù)學(xué)和幾乎計(jì)算而設(shè)計(jì)的鼎俘，有了它，CPU就從圖形處理的任務(wù)中解放出來(lái)辩涝，可以執(zhí)行其他更多的系統(tǒng)任務(wù)贸伐。

硬件加速

在計(jì)算機(jī)中把計(jì)算量非常大的工作分配給專(zhuān)門(mén)的硬件來(lái)處理，減輕CPU的工作量怔揩。

現(xiàn)狀

CSS的動(dòng)畫(huà)捉邢、變形、漸變并不會(huì)自動(dòng)的觸發(fā)GPU加速商膊，而是使用瀏覽器稍慢的軟件渲染引擎伏伐。
在transition，transform和animation的世界里晕拆，應(yīng)該卸載進(jìn)程到GPU以加快速度藐翎。
只有3D變形會(huì)有自己的layer，2D變形不會(huì)。

translateZ()（or translate3d()）Hack

為元素添加沒(méi)有變化的3D變形吝镣，騙取瀏覽器觸發(fā)硬件加速堤器。

代價(jià)

這種情況通過(guò)向它自己的層疊加元素，占用RAM和GPU存儲(chǔ)空間末贾。

●will-change

提前通知瀏覽器元素將要做什么動(dòng)畫(huà)闸溃，讓瀏覽器提前準(zhǔn)備合適的優(yōu)化設(shè)置。

【語(yǔ)法】

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

【兼容性】
IE13+拱撵、FireFox47+辉川、Chrome49+、Safari9.1+拴测、Opera39+乓旗、IOS9.3+、Android52+

【關(guān)鍵詞說(shuō)明】

auto:此關(guān)鍵字表示沒(méi)有特定的意圖昼扛，適用于它通常所做的任何啟發(fā)式和優(yōu)化。
scroll-position：表示將要改變?cè)氐臐L動(dòng)
位置蛹含。
contents：表示將要改變?cè)氐膬?nèi)容祠锣。
<custom-ident>：明確指定將要改變的屬性與給定的名稱(chēng)蓬推。
【例如】will-change：transform

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

<animateable-feature>：可動(dòng)畫(huà)的一些特征值，比如left、top、margin等苟蹈。
【例如】will-change:left/top/margin等等

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

end.
本筆記整理自慕課網(wǎng)

最后編輯于：2017.12.05 07:08:02

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末躯概，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子伯铣，更是在濱河造成了極大的恐慌，老刑警劉巖蹬蚁，帶你破解...
沈念sama閱讀 221,576評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件恃泪，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡犀斋，警方通過(guò)查閱死者的電腦和手機(jī)贝乎，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,515評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)叽粹，“玉大人览效，你說(shuō)我怎么就攤上這事却舀。” “怎么了锤灿？”我有些...
開(kāi)封第一講書(shū)人閱讀 168,017評(píng)論 0贊 360
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵挽拔，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我但校，道長(zhǎng)螃诅，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,626評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任状囱，我火速辦了婚禮术裸，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘亭枷。我一直安慰自己袭艺，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 68,625評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布叨粘。她就那樣靜靜地躺著猾编，像睡著了一般。火紅的嫁衣襯著肌膚如雪升敲。梳的紋絲不亂的頭發(fā)上答倡，一...
開(kāi)封第一講書(shū)人閱讀 52,255評(píng)論 1贊 308
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音冻晤，去河邊找鬼苇羡。笑死绸吸，一個(gè)胖子當(dāng)著我的面吹牛鼻弧，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播锦茁，決...
沈念sama閱讀 40,825評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼攘轩，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了码俩？” 一聲冷哼從身側(cè)響起度帮，我...
開(kāi)封第一講書(shū)人閱讀 39,729評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎稿存，沒(méi)想到半個(gè)月后笨篷，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,271評(píng)論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡瓣履，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,363評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年率翅，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片袖迎。...
茶點(diǎn)故事閱讀 40,498評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡冕臭，死狀恐怖腺晾，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情辜贵，我是刑警寧澤悯蝉，帶...
沈念sama閱讀 36,183評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站托慨，受9級(jí)特大地震影響鼻由，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜厚棵，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,867評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一嗡靡、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧窟感，春花似錦讨彼、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,338評(píng)論 0贊 24
一樁弒父案哈误，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至躏嚎，卻和暖如春蜜自，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背卢佣。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,458評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工重荠，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人虚茶。一個(gè)月前我還...
沈念sama閱讀 48,906評(píng)論 3贊 376
代替公主和親
正文我出身青樓戈鲁，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親嘹叫。傳聞我的和親對(duì)象是個(gè)殘疾皇子婆殿，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,507評(píng)論 2贊 359

CSS3動(dòng)畫(huà)/animation/ @keyframes/will-change

一治筒、CSS3動(dòng)畫(huà)

動(dòng)畫(huà)（animation）

視覺(jué)暫留原理

動(dòng)畫(huà)原理

二、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必須配合循環(huán)animation-iteration-count（）屬性泉孩，才能實(shí)現(xiàn)效果。

7/animation-fill-mode屬性

8/animation-play-state屬性

●animation屬性

【綜合案例】：

三缀拭、CSS3 @keyframes

Keyframes定義

使用說(shuō)明

四、CSS3 will-change

目標(biāo)

CPU和GPU

硬件加速

現(xiàn)狀

translateZ()（or translate3d()）Hack

代價(jià)

●will-change

推薦閱讀更多精彩內(nèi)容