站長(zhǎng)資訊網(wǎng)
實(shí)現(xiàn)css3動(dòng)畫(huà)效果：1、利用“@keyframes”規(guī)則配合animation屬性實(shí)現(xiàn)動(dòng)畫(huà)效果；2、利用transition過(guò)渡屬性實(shí)現(xiàn)動(dòng)畫(huà)效果，語(yǔ)法為“元素{transition:屬性名稱 時(shí)間 速度曲線 delay}”。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
用什么實(shí)現(xiàn)css3動(dòng)畫(huà)效果
一、是什么
CSS動(dòng)畫(huà)（CSS Animations）是為層疊樣式表建議的允許可擴(kuò)展標(biāo)記語(yǔ)言（XML）元素使用CSS的動(dòng)畫(huà)的模塊
即指元素從一種樣式逐漸過(guò)渡為另一種樣式的過(guò)程
常見(jiàn)的動(dòng)畫(huà)效果有很多，如平移、旋轉(zhuǎn)、縮放等等，復(fù)雜動(dòng)畫(huà)則是多個(gè)簡(jiǎn)單動(dòng)畫(huà)的組合
css實(shí)現(xiàn)動(dòng)畫(huà)的方式，有如下幾種：
transition 實(shí)現(xiàn)漸變動(dòng)畫(huà)
animation 實(shí)現(xiàn)自定義動(dòng)畫(huà)
二、實(shí)現(xiàn)方式
transition 實(shí)現(xiàn)漸變動(dòng)畫(huà)
transition的屬性如下：
-
property:填寫(xiě)需要變化的css屬性
-
duration:完成過(guò)渡效果需要的時(shí)間單位(s或者ms)
-
timing-function:完成效果的速度曲線
-
delay: 動(dòng)畫(huà)效果的延遲觸發(fā)時(shí)間
其中timing-function的值有如下：
值 描述
-
linear 勻速（等于 cubic-bezier(0,0,1,1)）
-
ease 從慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
-
ease-in 慢慢變快（等于 cubic-bezier(0.42,0,1,1)）
-
ease-out 慢慢變慢（等于 cubic-bezier(0,0,0.58,1)）
-
ease-in-out 先變快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），漸顯漸隱效果
-
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值
注意：并不是所有的屬性都能使用過(guò)渡的，如display:none<->display:block
舉個(gè)例子，實(shí)現(xiàn)鼠標(biāo)移動(dòng)上去發(fā)生變化動(dòng)畫(huà)效果
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>請(qǐng)把鼠標(biāo)指針移動(dòng)到藍(lán)色的 div 元素上，就可以看到過(guò)渡效果。</p> <p><b>注釋：</b>本例在 Internet Explorer 中無(wú)效。</p> </body> </html>
輸出結(jié)果：
animation 實(shí)現(xiàn)自定義動(dòng)畫(huà)
animation是由 8 個(gè)屬性的簡(jiǎn)寫(xiě)，分別如下：
-
animation-duration 指定動(dòng)畫(huà)完成一個(gè)周期所需要時(shí)間，單位秒（s）或毫秒（ms），默認(rèn)是 0
-
animation-timing-function 指定動(dòng)畫(huà)計(jì)時(shí)函數(shù)，即動(dòng)畫(huà)的速度曲線，默認(rèn)是 "ease" linear、ease、ease-in、ease-out、ease-in-out
-
animation-delay 指定動(dòng)畫(huà)延遲時(shí)間，即動(dòng)畫(huà)何時(shí)開(kāi)始，默認(rèn)是 0
-
animation-iteration-count 指定動(dòng)畫(huà)播放的次數(shù)，默認(rèn)是 1
-
animation-direction 指定動(dòng)畫(huà)播放的方向 默認(rèn)是 normal normal、reverse、alternate、alternate-reverse
-
animation-fill-mode 指定動(dòng)畫(huà)填充模式。默認(rèn)是 none forwards、backwards、both
-
animation-play-state 指定動(dòng)畫(huà)播放狀態(tài)，正在運(yùn)行或暫停。默認(rèn)是 running running、pauser
-
animation-name 指定 @keyframes 動(dòng)畫(huà)的名稱
CSS 動(dòng)畫(huà)只需要定義一些關(guān)鍵的幀，而其余的幀，瀏覽器會(huì)根據(jù)計(jì)時(shí)函數(shù)插值計(jì)算出來(lái)，
通過(guò) @keyframes 來(lái)定義關(guān)鍵幀
因此，如果我們想要讓元素旋轉(zhuǎn)一圈，只需要定義開(kāi)始和結(jié)束兩幀即可：
@keyframes rotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
from 表示最開(kāi)始的那一幀，to 表示結(jié)束時(shí)的那一幀
也可以使用百分比刻畫(huà)生命周期
@keyframes rotate{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } }
定義好了關(guān)鍵幀后，下來(lái)就可以直接用它了：
animation: rotate 2s;
三、總結(jié)
transition（過(guò)度） 用于設(shè)置元素的樣式過(guò)度，和animation有著類(lèi)似的效果，但細(xì)節(jié)上有很大的不同
transform（變形） 用于元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜，和設(shè)置樣式的動(dòng)畫(huà)并沒(méi)有什么關(guān)系，就相當(dāng)于color一樣用來(lái)設(shè)置元素的“外表”
translate（移動(dòng)） 只是transform的一個(gè)屬性值，即移動(dòng)
animation（動(dòng)畫(huà)） 用于設(shè)置動(dòng)畫(huà)屬性，他是一個(gè)簡(jiǎn)寫(xiě)的屬性，包含6個(gè)屬性
（學(xué)習(xí)視頻分享：css視頻教程）
