CSS動畫基礎(chǔ)知識

1、CSS 動畫基礎(chǔ)知識CSS動畫就是通過 CSS （Cascading Style Sheet,層疊樣式表）代碼搭建的網(wǎng)頁動畫。 它允許設(shè)計師和開發(fā)人員通過編輯網(wǎng)站的CSS 代碼來添加頁面動畫，從而輕松取代傳統(tǒng)動畫圖片或flash 動畫的設(shè)計方式。transition （過渡）和 animation （動畫）是 CSS3中的兩種動畫屬性。transition 強(qiáng)調(diào)過渡，是元素的一個或多個屬性發(fā)生變化時產(chǎn)生的過渡效果，同一個元素通過兩個不同的途徑獲取樣式，而第二個途徑當(dāng)某種改變發(fā)生（例如hover）時才能獲取樣式，這樣就會產(chǎn)生過渡動畫。animation 強(qiáng)調(diào)流程與控制，對元素的一個或多個屬性的變

2、化進(jìn)行控制，可以有多個關(guān)鍵幀（ animation 和 keyframes 結(jié)合使用）。1 transition 屬性transition 屬性是一個簡寫屬性，用于設(shè)置四個過渡屬性：transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 。（ 1） transition-duration 屬性。transition-duration 屬性規(guī)定完成過渡效果需要花費的時間（以秒或毫秒計）。 其格式為：transition-duration: time;屬性值 time 規(guī)定完

3、成過渡效果需要花費的時間（以秒或毫秒計）。默認(rèn)值是0，意味著不會有效果。若想得到動畫效果，需要指定transition-duration 屬性，否則持續(xù)時間為0， transition 不會有任何效果。（ 2） transition-delay 屬性。transition-delay 屬性規(guī)定過渡效果何時開始。其格式為：transition-delay: time;屬性值 time 規(guī)定在過渡效果開始之前需要等待的時間，以秒或毫秒計。（ 3） transition-property 屬性。transition-property 屬性指定CSS 屬性的 nametransition 效果（ tr

4、ansition 效果時將會啟動指定的 CSS 屬性的變化）。其格式為：transition-property: none |all | property;其中，屬性值none表示沒有屬性會獲得過渡效果；屬性值all表示所有屬性都將獲得過渡效果；property 定義應(yīng)用過渡效果的CSS 屬性名稱列表，列表以逗號分隔。（ 4） transition-timing-function 屬性。transition-timing-function 屬性指定切換效果的速度。此屬性允許一個過渡效果，以改變其持續(xù)時間的速度。其格式為：transition-timing-function: linear|ea

5、se|ease-in|ease-out|ease-in-out|cubic-bezier（n,n,n,n）;各屬性值的功能描述如下：linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于cubic-bezier（0,0,1,1） ）。ease 規(guī) 定 慢 速 開 始 ， 然 后 變 快 ， 然 后 慢 速 結(jié) 束 的 過 渡 效 果 （ 等 于 cubic-bezier（0.25,0.1,0.25,1） ）。ease-in 規(guī)定以慢速開始的過渡效果（等于cubic-bezier（0.42,0,1,1） ）。ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于cubic-bezier（0,0,0.5

6、8,1） ）。ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1)。cubic-bezier(n,n,n,n) 在cubic-bezier函數(shù)中定義自己的值。可能的值是 0至1之間的數(shù)值。例1 transition屬性的簡單應(yīng)用。先看一個簡單的例子，體會 transition屬性的應(yīng)用。在頁面中放置一個類名為container的層作為效果展示容器，在該層中再定義一個類名為move-box的層作為應(yīng)用過渡效果的對象，HTML代碼描述如下：為兩個層定義CSS樣式如下：.containerwidth: 300px;height: 200

7、px;border: 4px solid rgba(255, 0, 0, 0.9); .move-boxleft:0;width: 50px;height: 50px;position: relative;background: rgb(0,0,255);這樣，在頁面中會顯示如圖1所示的圖形。圖1兩個層在頁面中的顯示為.containe層添加鼠標(biāo)懸停樣式規(guī)則，設(shè)置move-box層白left屬性值為250px,這樣當(dāng)鼠標(biāo)懸停在圖1所示的紅色矩形框中，藍(lán)色正方形會移動到紅色矩形框的最右端。.container:hover .move-boxleft:250px;但這個移動是瞬時完成的，沒有任何過

8、渡效果，更談不上動畫了。為此，需要為這個移動的變化設(shè)置transition屬性。增加樣式規(guī)則如下：.container .move-boxtransition-duration: 2s;此時，可以得到如圖2所示的藍(lán)色小正方形移動的動畫效果。當(dāng)鼠標(biāo)懸停在紅色矩形框中時，藍(lán)色小正方形從左向右移動；當(dāng)鼠標(biāo)移離時，藍(lán)色小正方形從右向左移動。圖2藍(lán)色小正方形移動：雙向過渡效果完整的HTML代碼如下。transition 屬性的簡單應(yīng)用 .containerwidth: 300px;height: 200px;border: 4px solid rgba(255, 0, 0, 0.9);.move-box

9、left:0;width: 50px;height: 50px;position: relative;background: rgb(0,0,255);.container .move-boxtransition-duration: 2s;.container:hover .move-boxleft:250px; 在這個例子中，在 .container .move-box中設(shè)置了過渡動畫完成的時間為2秒鐘(transition-duration: 2s;),這樣在left屬性變化時會產(chǎn)生過渡動畫效果，而這種效果的產(chǎn)生有兩種途徑：一種是鼠標(biāo)在container上懸停，move-box的樣式從默認(rèn)

10、樣式到.container:hover 的樣式，left屬性發(fā)生了變化，觸發(fā)了過渡效果；一種是鼠標(biāo)移離 container層，move-box的樣式從.container:hover的樣式回到默認(rèn)樣式，left也變化了，因此也產(chǎn)生了過渡效果。這 兩個方向上的過渡都是平滑不突兀的。若 將.container .move-box 樣式定 義 中 的 transition-duration: 2s;移 至1J.container:hover .move-box 中， 并刪除 .container .move-box 樣式定義， 如下：.container:hover .move-boxleft:25

11、0px;transition-duration: 2s;此時，過渡動畫是單一方向上的，當(dāng)鼠標(biāo)在container上懸停時，move-box的樣式從默認(rèn)樣式到.container:hover的樣式，left屬性發(fā)生了變化，觸發(fā)了過渡效果；當(dāng)鼠標(biāo)移離container層，move-box的樣式從.container:hover的樣式回到默認(rèn)樣式，left也變化了，但此 時不是過渡動畫的方式，而是直接回到默認(rèn)，看上去比較突兀和生硬。效果如圖3所示。圖3藍(lán)色小正方形移動：單一方向上有過渡效果例1中的過渡動畫效果是通過改變動畫元素的left屬性，從而使得元素的位置發(fā)生改變而得到的。為了對選定元素進(jìn)行更多

12、的變換，可以應(yīng)用transform屬性。transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許將元素旋轉(zhuǎn)、縮放、移動、傾斜等。其基本使用格式為：transform: none|transform-functions;其中，屬性值none表示不進(jìn)行轉(zhuǎn)換；屬性值transform-functions表示所采用的轉(zhuǎn)換函數(shù)， 可應(yīng)用的轉(zhuǎn)換函數(shù)和功能描述如下：matrix(n,n,n,n,n,n) 定義2D轉(zhuǎn)換，使用六個值的矩陣。matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。translate(x,y)定義

13、2D平移轉(zhuǎn)換。translate3d(x,y,z)定義3D 平移轉(zhuǎn)換。translateX(x)定義X 軸平移轉(zhuǎn)換translateY(y)定義Y 軸平移轉(zhuǎn)換translateZ(z)定義Z 軸 3D 平移轉(zhuǎn)換scale(x,y)定義2D 縮放轉(zhuǎn)換。scale3d(x,y,z)定義3D 縮放轉(zhuǎn)換。scaleX(x)通過設(shè)置X 軸的值來定義縮放轉(zhuǎn)換。scaleY(y)通過設(shè)置Y 軸的值來定義縮放轉(zhuǎn)換。scaleZ(z)通過設(shè)置Z 軸的值來定義3D 縮放轉(zhuǎn)換。rotate(angle)定義2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。rotate3d(x,y,z,angle)定義3D 旋轉(zhuǎn)。rotateX(ang

14、le)定義沿著X 軸的3D 旋轉(zhuǎn)。rotateY(angle)定義沿著Y 軸的3D 旋轉(zhuǎn)。rotateZ(angle)定義沿著Z 軸的3D 旋轉(zhuǎn)。skew(x-angle,y-angle)定義沿著X 和 Y 軸的2D 傾斜轉(zhuǎn)換。skewX(angle)定義沿著X 軸的2D 傾斜轉(zhuǎn)換。skewY(angle)定義沿著Y 軸的2D 傾斜轉(zhuǎn)換。perspective(n)為 3D 轉(zhuǎn)換元素定義透視視圖。例如， transform: translate(50px,100px); 表示元素從左邊移動50 個像素，并從頂部移動100 像素。將例 1 中 .container:hover .move-box

15、 的定義修改為：.container:hover .move-boxtransform: translate(250px,0);或.container:hover .move-boxtransform: translateX(250px);同樣可以實現(xiàn)如圖2 所示的頁面效果。但transform 屬性的設(shè)置更靈活。例如，將例1 中 .container:hover .move-box 的定義修改為：.container:hover .move-boxtransform: translate(250px,150px);則可得到如圖4 所示的動畫效果。此時， 藍(lán)色小正方形在水平和垂直方向上都發(fā)生了

16、平 移。圖4藍(lán)色小正方形沿對角線平移再如，將例 1中.container:hover .move-box的定義修改為： .container:hover .move-boxtransform: rotate(45deg) translateX(200px);則可得到如圖5所示的動畫效果。圖5藍(lán)色小正方形旋轉(zhuǎn)并平移例2圖片的平移、縮放和旋轉(zhuǎn)變換。在頁面中放置一個類名為container的層作為效果展示容器，在該層中再定義一個9個子層，每個子層中放置一幅圖片，為圖片添加鼠標(biāo)懸停變換效果，當(dāng)鼠標(biāo)懸停在某幅圖片上時，該圖片或平移、或縮放、或旋轉(zhuǎn)。編寫完整的HTML代碼如下。圖片的平移、縮放和旋轉(zhuǎn)變換*

17、margin: 0;padding: 0; .containerborder: 3px solid rgba(255, 0, 255, 0.9);width: 1000px;height: 600px;display: flex;margin-left: 200px;flex-direction: row;flex-wrap: wrap;justify-content: space-around;align-content: space-around;.containerdivwidth: 300px;height: 150px;transition-duration: 2s;.contain

18、erdivimgwidth: 100%;height: 100%;.containerdiv:nth-child(1):hovertransform: translate(665px,200px);.containerdiv:nth-child(2):hovertransform: rotateX(60deg);.containerdiv:nth-child(3):hovertransform: rotateY(60deg);.containerdiv:nth-child(4):hovertransform: rotateX(360deg);.containerdiv:nth-child(5)

19、:hovertransform: scale(2);.containerdiv:nth-child(6):hovertransform: rotateY(360deg);.containerdiv:nth-child(7):hovertransform: rotateZ(360deg);).containerdiv:nth-child(8):hover (transform: rotateZ(180deg);).containerdiv:nth-child(9):hover(transform: skew(30deg); )在瀏覽器中打開保存上述HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖

20、6所示的變換效果(部分示例)。圖6圖片旋轉(zhuǎn)transition的優(yōu)點在于簡單易用，但是它有幾個很大的局限。（ 1） transition 需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。例1 和例 2 都是采用偽選擇器hover,在鼠標(biāo)懸停時產(chǎn)生動畫效果。（ 2） transition 是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。（ 3） transition 只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個狀態(tài)。 例如， 例 1 中的藍(lán)色小正方形只能沿一條指定的路線移動。若想讓藍(lán)色小正方形沿著上下左右邊界轉(zhuǎn)圈移動，transition 屬性就沒法做到。CSS Animation 就是為

21、了解決這些問題而提出的。2 animation 屬性animation 屬 性 是 六 個 動 畫 屬 性 的 簡 寫 屬 性 ， 這 6 個 屬 性 是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 和 animation-direction 。（ 1） animation-name 屬性。animation-name 屬性為 keyframes 動畫規(guī)定名稱。其格式為：animation-name: keyframen

22、ame|none;其中，屬性值keyframename 規(guī)定需要綁定到選擇器的keyframe 的名稱。屬性值none規(guī)定無動畫效果（可用于覆蓋來自級聯(lián)的動畫）。（ 2） animation-duration 屬性。animation-duration 屬性定義動畫完成一個周期所需要的時間，以秒或毫秒計。其格式為： animation-duration: time;（ 3） animation-timing-function 屬性。animation-timing-function 屬性規(guī)定動畫的速度曲線。速度曲線用于，使變化更為平滑。其格式為：animation-timing-functio

23、n: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier（n,n,n,n）;各屬性值的功能描述如下：linear動畫從頭到尾的速度是相同的。ease默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。ease-in動畫以低速開始。ease-out動畫以低速結(jié)束。ease-in-out動畫以低速開始和結(jié)束。cubic-bezier（n,n,n,n） 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳菑? 到 1 的數(shù)值。（ 4） animation-delay 屬性。animation-delay 屬性定義動畫什么時候開始。其格式為：a

24、nimation-delay: time;屬性值time單位可以是秒（s）或毫秒（ms）。并且time允許負(fù)值，-2s使動畫馬上開始，但跳過2 秒進(jìn)入動畫。（ 5） animation-iteration-count 屬性。animation-iteration-count 屬性定義動畫的播放次數(shù)。其格式為：animation-iteration-count: n|infinite;其中，屬性值n 定義動畫播放次數(shù)的數(shù)值；屬性值infinite 規(guī)定動畫應(yīng)該無限次播放。（ 6） animation-direction 屬性。animation-direction 屬性規(guī)定是否應(yīng)該輪流反向播放動

25、畫。其格式為：animation-direction: normal|reverse|alternate|alternate-reverse;其中，屬性值normal 表示以正常的方式播放動畫；reverse 以 相 反 方 向 播 放 動 畫 ；alternate播放動畫時，每奇數(shù)時間（1,3,5）正常播放，每偶數(shù)時間（2,4,6）反方向播放； alternate-reverse播放動畫時，每奇數(shù)時間（1,3,5）反方向播放，每偶數(shù)時間（2,4,6）正 常播放。例 3 沿著容器邊框轉(zhuǎn)圈移動的藍(lán)色小正方形。修改例 1 中的效果，使得藍(lán)色小正方形可以沿著上邊框、右邊框、下邊框和左邊框循環(huán)轉(zhuǎn)圈。編

26、寫HTML 文件如下。 沿邊框四周移動的小正方形.containerwidth: 300px;height: 200px;border: 4px solid rgba（255, 0, 0, 0.9）;.move-boxleft:0;top:0;width: 50px;height: 50px;position: relative;background: rgb（0,0,255）;animation:myfirst 5s infinite;keyframes myfirst0% left:0px; top:0px;25% left:250px; top:0px;50% left:250px; t

27、op:150px;75% left:0px; top:150px; 100% left:0px; top:0px;在瀏覽器中打開保存上述 HTML代碼的html文件，在瀏覽器中呈現(xiàn)出如圖 7所示的動 畫效果。圖7沿四周循環(huán)轉(zhuǎn)圈的小正方形如在上面 CSS定義的animation:myfirst 5s infinite;”語句后，再加上一條語句 “animation-direction:alternate;，則得到如圖8所示的動畫效果，與圖7的不同之處在于, 偶數(shù)運動周期時，小正方形的移動方向沿著“左邊框下邊框 右邊框上邊框”。圖8沿四周循環(huán)轉(zhuǎn)圈的小正方形需要說明的是：Internet Explo

28、rer 10、Firefox 以及 Opera 等支持 animation 屬性，Safari 和 Chrome支持替代的 -webkit-animation 屬性，而Internet Explorer 9 以及更早的版本不支 持animation屬性。因此，從瀏覽器兼容性的角度出發(fā)，在例 3的HTML文件的CSS定義 中可加上如下定義：-webkit-keyframes myfirst 0% left:0px; top:0px;25% left:250px; top:0px;50% left:250px; top:150px;75% left:0px; top:150px; 100% lef

29、t:0px; top:0px;例4圖片的縮放、旋轉(zhuǎn)和傾斜動畫。在頁面中放置一個類名為container的層作為效果展示容器，在該層中再定義一個4個子層，每個子層中放置一幅圖片，為每幅圖片添加動畫效果，第 1幅圖片縮小后放大，第 2幅圖片繞X 軸翻轉(zhuǎn)，第3 幅圖片沿Z 軸旋轉(zhuǎn)，第4 幅圖片傾斜。編寫完整的HTML 代碼如下。 圖片的縮放、旋轉(zhuǎn)和傾斜變換*margin: 0;padding: 0;.containerborder: 3px solid rgba(255, 0, 255, 0.9);width: 850px;height: 550px;display: flex;margin: 0

30、auto;flex-direction: row;flex-wrap: wrap;justify-content: space-around;align-content: space-around;.containerdivwidth: 400px;height:250px;.containerdivimgwidth: 100%;height: 100%;.containerdiv:nth-child(1)animation:myAnim1 3s infinite;keyframes myAnim10%transform:none;50%transform:scale(0);100% tran

31、sform:scale(1);.containerdiv:nth-child(2)animation:myAnim2 3s infinite;keyframes myAnim20% transform: none;100% transform: rotateX(360deg);.containerdiv:nth-child(3)animation:myAnim3 3s infinite;keyframes myAnim3from transform: none;to transform: rotateZ(360deg);.containerdiv:nth-child(4)animation:m

32、yAnim4 3s infinite;keyframes myAnim40% transform: none;33% transform: skew(15deg,15deg);67% transform: skew(-15deg,-15deg);100% transform: skew(0deg,0deg);在瀏覽器中打開保存上述HTML 代碼的 html 文件， 在瀏覽器中呈現(xiàn)出如圖畫效果。9 所示的動圖9圖片的縮放、旋轉(zhuǎn)和傾斜動畫例5旋轉(zhuǎn)的文字。在頁面中放置一個類名為container的層作為效果展示容器，在該層中再定義一個3個子層，每個子層中放置一個漢字，為每個漢字所在的層添加動畫效果，

33、第1個漢字水平翻轉(zhuǎn)，第2個漢字繞中心旋轉(zhuǎn)，第 3個漢字垂直翻轉(zhuǎn)。編寫完整的HTML代碼如下。 歡樂頌 .containermargin: 0 auto;width: 650px;height: 250px;display: flex;flex-direction: row;flex-wrap: wrap;border: 4px solid rgba(255, 0, 0, 0.9);.containerdivwidth:200px;height:200px;margin:20px auto;text-align: center;font:800 100px/200px 隸書 ;border-ra

34、dius: 50%;transform-origin:center 50%;.containerdiv:nth-child(1)background:#f00;animation: anim1 2s infinite linear;keyframes anim1from transform: rotate(0);to transform: rotateX(360deg);.containerdiv:nth-child(2)background:#0f0;animation: anim2 2s infinite linear;keyframes anim2from transform: rotate(0);to transform: rotate(360deg);.containerdiv:nth-c