Html+CSS3基礎(chǔ)之css3動(dòng)畫特效詳解

時(shí)間：2023-07-21 04:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-21 04:12:01 來源：網(wǎng)站運(yùn)營

Html+CSS3基礎(chǔ)之css3動(dòng)畫特效詳解：大家都知道網(wǎng)頁的3大組成部分，分別是結(jié)構(gòu)，表現(xiàn)和行為。就像我們要蓋一座房子，要地基要打的扎實(shí)，房子的架構(gòu)要穩(wěn)固，而我們網(wǎng)頁當(dāng)中的地基和架構(gòu)就是Html，當(dāng)我們蓋好了房子，最終的美觀度還是看我們的裝修風(fēng)格，是歐美風(fēng)，還是田園風(fēng)，這樣我們的房子看起來才是舒服的，而我們大家平?？吹降木W(wǎng)頁裝修風(fēng)格或者是說網(wǎng)頁的呈現(xiàn)樣式主要是由CSS層疊樣式表來設(shè)置的，書寫CSS層疊樣式表可以隨意改變網(wǎng)頁的布局結(jié)構(gòu)和內(nèi)容樣式，從而達(dá)到我們想要的風(fēng)格排版；最后我們還需要給網(wǎng)頁添加各種各樣的動(dòng)態(tài)效果,對瀏覽器事件作出響應(yīng)，檢測訪客的瀏覽信息等，這些都是需要通過Javascript腳本語言來實(shí)現(xiàn)的。

而我們今天要說的既不是網(wǎng)頁的地基Html也不是網(wǎng)頁的行為Javascript，而是修飾網(wǎng)頁美觀程度的Css3動(dòng)畫，之前我們編寫的CSS層疊樣式表可以隨意實(shí)現(xiàn)我們想要呈現(xiàn)的樣式效果，讓我們的網(wǎng)頁最終的呈現(xiàn)狀態(tài)完美的符合設(shè)計(jì)稿。隨著Css3的出現(xiàn)，給我們網(wǎng)頁的效果增加很多動(dòng)畫元素，他們可以讓我們的網(wǎng)頁變得更加好玩有趣，并且更容易交互。之前網(wǎng)頁當(dāng)中的很多動(dòng)畫圖片、flash動(dòng)畫和js動(dòng)畫都被css3動(dòng)畫給取代了。

網(wǎng)站動(dòng)畫已經(jīng)是現(xiàn)在開發(fā)過程中不可缺少的一部分，所以Css3動(dòng)畫這個(gè)技術(shù)點(diǎn)也是作為一個(gè)前端開發(fā)人員必須要具備的一種能力，那么接下來我們來看一下Css3動(dòng)畫特效詳解，在這之前，我們先來了解一下什么是動(dòng)畫？提到動(dòng)畫這個(gè)詞，你會(huì)想到什么？

通過剛才的列舉，我們來思考一個(gè)問題，這些都是動(dòng)畫嗎？換句話說動(dòng)畫是不是視頻？在這里我要明確的告訴大家，動(dòng)畫不是視頻。

動(dòng)畫≠視頻

只所以這么說，是因?yàn)檫@2個(gè)詞從根本的定義上來看是不一樣的，首先我們來看動(dòng)畫，動(dòng)畫是采用逐幀拍攝對象并連續(xù)播放而形成運(yùn)動(dòng)的影像技術(shù)，它的拍攝方法是采用逐格方式。比如下面大家看到的這個(gè)gif動(dòng)圖，她就是由我們的ps當(dāng)中的時(shí)間軸一幀一幀來做，添加上一定的延遲時(shí)間弄成的。

其實(shí)動(dòng)畫的版本是有很多的，涉及的范圍也比較廣，基本上動(dòng)畫的版本是有4種的:

1) 院線版：主要是在電影院播放制作的動(dòng)畫。

2）電視劇版：主要是通過電視的形式播放的動(dòng)畫。




3）公益動(dòng)畫：主要指的是不以盈利為目的而制作的動(dòng)畫。

4) WEB動(dòng)畫：在互聯(lián)網(wǎng)平臺播放和傳播形式的前提下制作的動(dòng)畫，播放的方式一般為在線看或者是可以下載的動(dòng)畫

接下來我們來看下什么是視頻，視頻：視頻的每幀圖像都是通過實(shí)時(shí)攝取自然景象或者活動(dòng)對象獲得的。視頻信號可以通過攝像機(jī)、錄像機(jī)等連續(xù)圖像信號輸入設(shè)備來產(chǎn)生，比如一些類似于奔跑吧兄弟之類的綜藝節(jié)目和歡樂頌之類的電視劇等等。

通過剛才的講解，相信大家對于動(dòng)畫已經(jīng)有了簡單的了解，那么接下來我們來看一下在我們網(wǎng)頁當(dāng)中常見的3種動(dòng)畫表現(xiàn)形式:

1) Css3動(dòng)畫

優(yōu)點(diǎn)：瀏覽器可以對動(dòng)畫進(jìn)行優(yōu)化，強(qiáng)制使用硬件加速（通過GPU來提高動(dòng)畫性能）

缺點(diǎn)：CSS動(dòng)畫只能暫停,不可以固定動(dòng)畫中某個(gè)特定的時(shí)間點(diǎn)，不能中間反轉(zhuǎn)動(dòng)畫，不能控制時(shí)間的靈活度，不能在某個(gè)特殊的位置添加回調(diào)函數(shù)或是綁定回放事件,沒有進(jìn)度報(bào)告。

2) FLASH動(dòng)畫、gif圖

優(yōu)點(diǎn)：容易操作，對計(jì)算機(jī)的硬件要求低。

缺點(diǎn)：Flash動(dòng)畫必須要插件來支持，如果沒安裝插件，瀏覽器是解析不了的。

3) JavaScript腳本動(dòng)畫

優(yōu)點(diǎn)：JavaScript動(dòng)畫改變能力很強(qiáng)大，他可以在動(dòng)畫播放的過程當(dāng)中對動(dòng)畫進(jìn)行隨時(shí)的控制，比如開始、暫停、后退、結(jié)束、取消等都是可以做到的。

缺點(diǎn)：JavaScript動(dòng)畫代碼的難度要高于CSS3動(dòng)畫，除此之外JavaScript在瀏覽器的主線程中運(yùn)行，而這里還有其他的腳本要計(jì)算、繪制等，可能會(huì)干擾到動(dòng)畫的運(yùn)行，出現(xiàn)丟失幀的情況。

通過上面的對比大家可以很清晰的看到各自的優(yōu)缺點(diǎn)，如果我們做的是pc端的頁面更多的考慮的是用戶體驗(yàn)上的流暢度，但是在移動(dòng)端上我們還需要跟多的關(guān)注的是用戶對于流量的使用情況，甚至還有當(dāng)前移動(dòng)設(shè)備的一個(gè)耗電量等等。關(guān)于流暢度，在現(xiàn)在網(wǎng)頁動(dòng)畫的表現(xiàn)形式上目前是由2種的，分別是JavaScript動(dòng)畫與CSS3動(dòng)畫。JavaScript動(dòng)畫主要是通過js腳本語言動(dòng)態(tài)的來實(shí)現(xiàn)動(dòng)畫效果，這也是我們在pc端兼容性比較好的一種動(dòng)畫實(shí)現(xiàn)方案；但是在移動(dòng)端設(shè)備當(dāng)中CSS3動(dòng)畫更勝一籌，主要是在于他的性能上比原生的要好。

CSS3動(dòng)畫屬性Animation，僅僅從Animation這個(gè)單詞字面上的意思來看就是動(dòng)畫的意思，CSS3動(dòng)畫只能用在我們的網(wǎng)頁結(jié)構(gòu)當(dāng)中已經(jīng)存在的DOM元素上，這樣的話我們可以不用寫很多的js代碼，這個(gè)對于不太熟悉JavaScript的開發(fā)人員來說是一件很值得慶幸的一件事情了，但是呢Animation動(dòng)畫也有自己的缺點(diǎn)，主要是因?yàn)樗F(xiàn)在是不是很完善還有很多的兼容性的存在。




CSS3 Animation動(dòng)畫當(dāng)中比較重點(diǎn)的一個(gè)東西就是"Keyframes"，我們把他叫做“關(guān)鍵幀，如果之前你接觸過flash，那么"Keyframes"關(guān)鍵幀應(yīng)該不會(huì)很陌生，之前我們在用transtion來制作一個(gè)過渡的動(dòng)畫效果的時(shí)候，我們可以控制一個(gè)動(dòng)畫開始和結(jié)束時(shí)候的屬性，動(dòng)畫開始和延遲的時(shí)間和運(yùn)動(dòng)軌跡等等，這些東西都是動(dòng)畫在變化過程當(dāng)中的某一個(gè)值，但是如果我們想要跟flash的效果一樣，第一幀是要做什么，第二幀是要做什么動(dòng)作，要是用transtion過渡動(dòng)畫來實(shí)現(xiàn)就很難了。

那么我們要想實(shí)現(xiàn)跟flash一樣的動(dòng)畫效果，就需要CSS3的Animation動(dòng)畫的“keyframes”這個(gè)屬性來實(shí)現(xiàn)了，Keyframes的用法就是是由@keyframes開頭的，后面寫動(dòng)畫的名稱加上一對花括號{}，括號當(dāng)中寫我們想要的不同的樣式，我們可以用form、to來表示一個(gè)動(dòng)畫從哪里開始到哪里結(jié)束，相當(dāng)于我們的另外一種表示方式0%到100%，中間可以添加不同關(guān)鍵幀來寫我們想要的變化過程，需要大家注意的就是，比如0%不能報(bào)百分符號省略到，如果沒有添加，keyframes是無效的，不起任何作用。需要大家注意的就是keyframes的單位是百分比。

@ keyframes mymove{from {background-position: 0 0;}to {background-position: -1080px 0;}}@keyframes mymove{0% {background-position: 0 0;}15% {background-position: -180px 0;}30% {background-position: -360px 0;}45% {background-position: -540px 0;}60% {background-position: -720px 0;}75% {background-position: -900px 0;}90% {background-position: -1080px 0;}100% {background-position: 0 0;}}其中mymove是一個(gè)名字，你可以隨意取，最好是語義化的，現(xiàn)在所有的瀏覽器都不支持 @keyframes 的語法規(guī)則。Firefox 的是 @-moz-keyframes 的寫法。Opera 的是 @-o-keyframes 的寫法。Safari 和 Chrome 的是 @-webkit-keyframes 的寫法。為了獲得最佳的瀏覽器支持，我們需要在寫動(dòng)畫的時(shí)候把所有的都寫上：

@ keyframes mymove{ 0% {background-position: 0 0;} 15% {background-position: -180px 0;}30% {background-position: -360px 0;}45% {background-position: -540px 0;}60% {background-position: -720px 0;}75% {background-position: -900px 0;}90% {background-position: -1080px 0;}100% {background-position: 0 0;}}@-moz-keyframes mymove /* Firefox */{0% {background-position: 0 0;} 15% {background-position: -180px 0;}30% {background-position: -360px 0;}45% {background-position: -540px 0;}60% {background-position: -720px 0;}75% {background-position: -900px 0;}90% {background-position: -1080px 0;}100% {background-position: 0 0;}}@-webkit-keyframes mymove /* Safari and Chrome */{0% {background-position: 0 0;} 15% {background-position: -180px 0;}30% {background-position: -360px 0;}45% {background-position: -540px 0;}60% {background-position: -720px 0;}75% {background-position: -900px 0;}90% {background-position: -1080px 0;}100% {background-position: 0 0;}}@-o-keyframes mymove /* Opera */{0% {background-position: 0 0;} 15% {background-position: -180px 0;}30% {background-position: -360px 0;}45% {background-position: -540px 0;}60% {background-position: -720px 0;}75% {background-position: -900px 0;}90% {background-position: -1080px 0;}100% {background-position: 0 0;}}上面的案例當(dāng)中呢我們定義了一個(gè)叫"mymove"的動(dòng)畫，他的動(dòng)畫是從0%開始到100%結(jié)束，其中呢我們還設(shè)置了15%，30%，45%，60%，75%，90%6個(gè)過程動(dòng)畫，其實(shí)呢上面代碼的具體意思是說mymove動(dòng)畫在0%時(shí)背景定位到0 0，然后到15%是元素背景的位置到-180px 0；以此類推最后到100%結(jié)束動(dòng)畫的位置元素又回到了起點(diǎn)0 0，假如我們給當(dāng)前的這個(gè)動(dòng)畫設(shè)置了800ms的運(yùn)動(dòng)時(shí)間，那么他每一幀的運(yùn)動(dòng)效果如下：




當(dāng)我們定義好了Keyframes之后，需要怎么去調(diào)用定義好的動(dòng)畫“mymove”呢？下面我們通過一個(gè)案例來看一下怎樣來使用animation動(dòng)畫屬性：

.demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:mymove;/*定義動(dòng)畫的名字，和keyframes定義的動(dòng)畫名一樣*/ -webkit-animation-duration: 800ms;/*動(dòng)畫持續(xù)時(shí)間*/ -webkit-animation-timing-function: step-start; /*動(dòng)畫頻率，和transition-timing-function是一樣的*/ -webkit-animation-delay: 2s;/*動(dòng)畫延遲時(shí)間*/ -webkit-animation-iteration-count: 10;/*定義循環(huán)資料，infinite為無限次*/ -webkit-animation-direction: alternate;/*定義動(dòng)畫方式*/ }CSS Animation動(dòng)畫效果會(huì)直接影響到每個(gè)元素對應(yīng)的CSS屬性值，每個(gè)元素不同的變化都是由animation來進(jìn)行控制的，每個(gè)動(dòng)畫后面的屬性值都是會(huì)覆蓋到前面的屬性值，例如我們剛才設(shè)置的background-position當(dāng)動(dòng)畫執(zhí)行到不同的百分比情況下，他們只是不斷的覆蓋上一次出現(xiàn)的css屬性。就像我們平時(shí)寫的css樣式一樣，最后的樣式會(huì)覆蓋前面的樣式，下面是一張w3c官網(wǎng)上對css3的animation變化過程的示意圖

最后我們來看一下關(guān)于animation相關(guān)的幾個(gè)屬性的用法：

1、animation-name： 用來定義一個(gè)動(dòng)畫的名稱

語法： animation-name: none | mymove |多個(gè)名字;

none為默認(rèn)值，當(dāng)屬性值是none時(shí)，表示沒有任何的動(dòng)畫效果。

mymove是由Keyframes創(chuàng)建的動(dòng)畫名 mymove要和Keyframes中的mymove一致，如果不一致,將不能實(shí)現(xiàn)任何動(dòng)畫效果；

當(dāng)我們同時(shí)給animation添加幾個(gè)動(dòng)畫的時(shí)候，我們只需要用逗號“，”隔開就可以。

2、animation-duration ：指定元素播放動(dòng)畫所持續(xù)的時(shí)間長

語法： animation-duration: 0 | time

time：為數(shù)值，單位為秒S，他的默認(rèn)值為“0”。

這個(gè)屬性跟transition中的transition-duration使用方法是一樣的

3、animation-delay： 指定元素動(dòng)畫什么時(shí)間開始

語法： animation-delay: time；

time：表示的是時(shí)間，單位是秒S，默認(rèn)數(shù)值是0。

4、animation-iteration-count： 指定元素播放動(dòng)畫的循環(huán)次數(shù)

語法： animation-iteration-count: value；

屬性值是1時(shí)，是默認(rèn)值，當(dāng)屬性值是infinite表示的意思是無限循環(huán)的。

5、animation-direction：指定元素動(dòng)畫播放的方向

語法： animation-direction: normal|reverse|alternate|alternate-reverse

normal 動(dòng)畫的運(yùn)動(dòng)形式是正常的，這是默認(rèn)值。

reverse 動(dòng)畫的播放形式是反向的。

alternate 動(dòng)畫在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放。

alternate-reverse 動(dòng)畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。

6、animation-timing-function：動(dòng)畫的播放方式

語法： animation-timing-function: ease|ease-in|ease-in-out|linear|cubic-bezier(n,n,n,n)；

linear 動(dòng)畫運(yùn)動(dòng)的開始和結(jié)尾都是勻速的。

ease 默認(rèn)。動(dòng)畫剛開始的時(shí)候速度是慢的，然后加快，最后變慢

ease-in 動(dòng)畫從慢的速度開始。

ease-out 動(dòng)畫從慢的速度結(jié)尾。

ease-in-out 動(dòng)畫的開始和結(jié)尾都是慢的。

cubic-bezier(n,n,n,n) 在 http:http://cubic-bezier.com網(wǎng)址當(dāng)中可以設(shè)置自己需要的運(yùn)動(dòng)方式

step-start 動(dòng)畫運(yùn)動(dòng)的時(shí)候從最左邊的端點(diǎn)為開始點(diǎn)

step-end 動(dòng)畫運(yùn)動(dòng)的時(shí)候從最后的端點(diǎn)作為開始點(diǎn)，這個(gè)是默認(rèn)值

7、animation-fill-mode ：當(dāng)動(dòng)畫不播放時(shí)，要應(yīng)用到元素的樣式

語法： animation-fill-mode: none|forwards|backwards

none 默認(rèn)值

forwards 在動(dòng)畫結(jié)束后，動(dòng)畫停留在結(jié)束的位置

backwards 在動(dòng)畫結(jié)束后，動(dòng)畫回到最初的位置