|
CSS3屬性中有關(guān)于制作動畫的三個屬性：Transform,Transition,Animation；我們一起學(xué)習(xí)完了Transform和Transition,，讓我們對元素實現(xiàn)了一些基本的動畫效果，這些我想足以讓大家激動了一陣子,，今天我們趁著這個熱勁繼續(xù)第三個動畫屬性Animation的學(xué)習(xí)，單從Animation字面上的意思,，我們就知道是“動畫”的意思,。但CSS3中的Animation與HTML5中的Canvas繪制動畫又不同,，Animation只應(yīng)用在頁面上已存在的DOM元素上,，而且他跟Flash和JavaScript以及jQuery制作出來的動畫效果又不一樣,，因為我們使用CSS3的Animation制作動畫我們可以省去復(fù)雜的js,jquery代碼（像我這種不懂js的人來說是件很高興的事了），只是有一點不足之處,，我們運用Animation能創(chuàng)建自己想要的一些動畫效果，但是有點粗糙,，如果想要制作比較好的動畫,，我見意大家還是使用flash或js等,。雖然說Animation制作出來的動畫簡單粗糙,，但我想還是不能減少我們大家對其學(xué)習(xí)的熱情。 在開始介紹Animation之前我們有必要先來了解一個特殊的東西,，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”,，玩過flash的朋友可能對這個東西并不會陌生。下面我們就一起來看看這個“Keyframes”是什么東西,。前面我們在使用transition制作一個簡單的transition效果時,，我們包括了初始屬性和最終屬性，一個開始執(zhí)行動作時間和一個延續(xù)動作時間以及動作的變換速率,，其實這些值都是一個中間值,，如果我們要控制的更細一些，比如說我要第一個時間段執(zhí)行什么動作,，第二個時間段執(zhí)行什么動作（換到flash中說,，就是第一幀我要執(zhí)行什么動作，第二幀我要執(zhí)行什么動作）,，這樣我們用Transition就很難實現(xiàn)了,，此時我們也需要這樣的一個“關(guān)鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個屬性來實現(xiàn)這樣的效果,。下面我們一起先來看看Keyframes: Keyframes具有其自己的語法規(guī)則,，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”,，括號中就是一些不同時間段樣式規(guī)則,，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規(guī)則是由多個百分比構(gòu)成的,，如“0%”到"100%"之間,，我們可以在這個規(guī)則中創(chuàng)建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性,，從而讓元素達到一種在不斷變化的效果,，比如說移動，改變元素顏色,，位置,，大小，形狀等,，不過有一點需要注意的是,，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結(jié)束，也就是說這個 "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說的是,，其中"0%"不能像別的屬性取值一樣把百分比符號省略,，我們在這里必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的,，不起任何作用,。因為keyframes的單位只接受百分比值。 Keyframes可以指定任何順序排列來決定Animation動畫變化的關(guān)鍵位置,。其具體語法規(guī)則如下： keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
我把上面的語法綜合起來 @keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部寫成百分比的形式：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
其中IDENT是一個動畫名稱,，你可以隨便取，當(dāng)然語義化一點更好,，Percentage是百分比值,，我們可以添加許多個這樣的百分比，Properties為css的屬性名,，比如說left,background等,，value就是相對應(yīng)的屬性的屬性值。值得一提的是,，我們from和to 分別對應(yīng)的是0%和100%,。這個我們在前面也提到過了。到目前為止支技animation動畫的只有webkit內(nèi)核的瀏覽器,，所以我需要在上面的基礎(chǔ)上加上-webkit前綴,，據(jù)說Firefox5可以支持css3的 animation動畫屬性。 我們來看一個W3C官網(wǎng)的實例 @-webkit-keyframes 'wobble' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
這里我們定義了一個叫“wobble”的動畫,，他的動畫是從0%開始到100%時結(jié)束,，從中還經(jīng)歷了一個40%和60%兩個過程，上面代碼具體意思是：wobble動畫在0%時元素定位到left為100px的位置背景色為green,，然后40%時元素過渡到left為150px的位置并且背景色為orange,，60%時元素過渡到left為75px的位置,背景色為blue，最后100%結(jié)束動畫的位置元素又回到起點left為100px處,背景色變成red,。假設(shè)置我們只給這個動畫有10s的執(zhí)行時間,，那么他每一段執(zhí)行的狀態(tài)如下圖所示：
Keyframes定義好了以后，我們需要怎么去調(diào)用剛才定義好的動畫“wobble” CSS3的animation類似于transition屬性,，他們都是隨著時間改變元素的屬性值。他們主要區(qū)別是transition需要觸發(fā)一個事件(hover事件或click事件等)才會隨時間改變其css屬性,；而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值,，從而達到一種動畫的效果。這樣我們就可以直接在一個元素中調(diào)用animation的動畫屬性,基于這一點,，css3的animation就需要明確的動畫屬性值,，這也就是回到我們上面所說的，我們需要keyframes來定義不同時間的css屬性值,達到元素在不同時間段變化的效果,。 下面我們來看看怎么給一個元素調(diào)用animation屬性 .demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
-webkit-animation-name:'wobble';/*動畫屬性名,，也就是我們前面keyframes定義的動畫名*/
-webkit-animation-duration: 10s;/*動畫持續(xù)時間*/
-webkit-animation-timing-function: ease-in-out; /*動畫頻率,，和transition-timing-function是一樣的*/
-webkit-animation-delay: 2s;/*動畫延遲時間*/
-webkit-animation-iteration-count: 10;/*定義循環(huán)資料，infinite為無限次*/
-webkit-animation-direction: alternate;/*定義動畫方式*/
}
CSS Animation動畫效果將會影響元素相對應(yīng)的css值,，在整個動畫過程中,，元素的變化屬性值完全是由animation來控制，動畫后面的會覆蓋前面的屬性值,。如上面例子：因為我們這個demo只是在不同的時間段改變了demo1的背景色和左邊距,，其默認值是：margin-left:100px;background: blue；但當(dāng)我們在執(zhí)行動畫0%時,，margin-left:100px,background:green,；當(dāng)執(zhí)行到40%時，屬性變成了：margin-left:150px;background:orange;當(dāng)執(zhí)行到60%時margin-left:75px;background:blue;當(dāng)動畫 執(zhí)行到100%時：margin-left:100px;background: red;此時動畫將完成,，那么margin-left和background兩個屬性值將是以100%時的為主,他不會產(chǎn)生疊加效果,，只是一次一次覆蓋前一次出將的css屬性。就如我們平時的css一樣,，最后出現(xiàn)的權(quán)根是最大的,。當(dāng)動畫結(jié)束后，樣式回到默認效果,。 我們可以看一張來自w3c官網(wǎng)有關(guān)于css3的animation對屬性變化的過程示意圖
從上面的Demo中我們可以看出animation和transition一樣有自己相對應(yīng)的屬性,，那么在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我們分別來看看這幾個屬性的使用 一,、animation-name: 語法： animation-name: none | IDENT[,none | IDENT]*;
取值說明： animation-name:是用來定義一個動畫的名稱,，其主要有兩個值：IDENT是由Keyframes創(chuàng)建的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致,，如果不一致,將不能實現(xiàn)任何動畫效果,；none為默認值，當(dāng)值為none時,，將沒有任何動畫效果,。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素,，我們只需要用逗號“,，”隔開。 二,、animation-duration： 語法： animation-duration: <time>[,<time>]*
取值說明： animation-duration是用來指定元素播放動畫所持續(xù)的時間長,，取值:<time>為數(shù)值，單位為s （秒.）其默認值為“0”,。這個屬性跟transition中的transition-duration使用方法是一樣的,。 三、animation-timing-function: 語法： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
取值說明： animation-timing-function:是指元素根據(jù)時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式,。他和transition中的transition-timing-function一樣,，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點這里,，查看其中transition-timing-function的使用方法,。 四、animation-delay: 語法： animation-delay: <time>[,<time>]*
取值說明： animation-delay:是用來指定元素動畫開始時間,。取值為<time>為數(shù)值,，單位為s(秒)，其默認值也是0,。這個屬性和transition-delayy使用方法是一樣的,。 五、animation-iteration-count 語法： animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值說明： animation-iteration-count是用來指定元素播放動畫的循環(huán)次數(shù),，其可以取值<number>為數(shù)字,，其默認值為“1”；infinite為無限次數(shù)循環(huán),。 六,、animation-direction 語法： animation-direction: normal | alternate [, normal | alternate]* 取值說明： animation-direction是用來指定元素動畫播放的方向，其只有兩個值,，默認值為normal,，如果設(shè)置為normal時，動畫的每次循環(huán)都是向前播放,；另一個值是alternate,，他的作用是，動畫播放在第偶數(shù)次向前播放,，第奇數(shù)次向反方向播放,。 七、animation-play-state 語法： animation-play-state:running | paused [, running | paused]*
取值說明： animation-play-state主要是用來控制元素動畫的播放狀態(tài),。其主要有兩個值,，running和paused其中running為默認值。他們的作用就類似于我們的音樂播放器一樣,，可以通過paused將正在播放的動畫停下了,，也可以通過running將暫停的動畫重新播放，我們這里的重新播放不一定是從元素動畫的開始播放,，而是從你暫停的那個位置開始播放,。另外如果暫時了動畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài),。這個屬性目前很少內(nèi)核支持，所以只是稍微提一下。 上面我們分別介紹了animation中的各個屬性的語法和取值,，那么我們綜合上面的內(nèi)容可以給animation屬性一個速記法： animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*
如下圖所示
兼容的瀏覽器 前面我也簡單的提過,，CSS3的animation到目前為止只支持webkit內(nèi)核的瀏覽器，因為最早提出這個屬性的就是safari公司,據(jù)說Firefox5.0+將支持Animation,。如圖所示
那么到此為止,，我們主要一起學(xué)習(xí)了有關(guān)animation的理論知識，下面我們一起來看兩個實例制作過程,，來加強對animation的實踐能力 DEMO一：發(fā)光變色的button 我們這個demo主要是通過在keyframes中改變元素的background;color;box-shadow三個屬性,，來達到一種發(fā)光變色的button效果，我們來看看其實現(xiàn)代碼 HTML Code: <a href="" class="btn">發(fā)光的button</a>
CSS Code /*給這個按鈕創(chuàng)建一個動名名稱：buttonLight,，然后在每個時間段設(shè)置不同的background,color來達到變色效果,，改變box-shadow來達到發(fā)光效果*/
@-webkit-keyframes 'buttonLight' {
from {
background: rgba(96, 203, 27,0.5);
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5);
color: red;
}
25% {
background: rgba(196, 203, 27,0.8);
-webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);
color: blue;
}
50% {
background: rgba(196, 203, 127,1);
-webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 100, 1);
color: orange;
}
75% {
background: rgba(196, 203, 27,0.8);
-webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8);
color: black;
}
to {
background: rgba(96, 203, 27,0.5);
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5);
color: green;
}
}
a.btn {
/*按鈕的基本屬性*/
background: #60cb1b;
font-size: 16px;
padding: 10px 15px;
color: #fff;
text-align: center;
text-decoration: none;
font-weight: bold;
text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8);
/*調(diào)用animation屬性，從而讓按鈕在載入頁面時就具有動畫效果*/
-webkit-animation-name: "buttonLight"; /*動畫名稱,，需要跟@keyframes定義的名稱一致*/
-webkit-animation-duration: 5s;/*動畫持續(xù)的時間長*/
-webkit-animation-iteration-count: infinite;/*動畫循環(huán)播放的次數(shù)*/
}
效果：
為了更好的看出這個demo的效果,，你可以把上面的代碼復(fù)制到你本過的頁面上，并使用safari和chrome,，你會覺得很有意思,，整個按鈕好像在不停的呼吸一樣。 Demo二：方形旋轉(zhuǎn)變成圓型 我們這個demo是通過transform的rotate和border-radius不同值,，把一個方型圖片隨著時間的推移,，慢慢的轉(zhuǎn)換成了個圓型效果，下面我們來看看其具體實現(xiàn)的效果 HTML Code: <a href="#" class="box"></a> <span class="click-btn">Click</span>
CSS Code: /*定義方型轉(zhuǎn)化為圓型的動畫round*/
@-webkit-keyframes 'round' {
from{
-webkit-transform: rotate(36deg);
-webkit-border-radius: 2px;
}
10%{
-webkit-transform: rotate(72deg);
-webkit-border-radius: 4px;
}
20% {
-webkit-transform: rotate(108deg);
-webkit-border-radius: 6px;
}
30% {
-webkit-transform: rotate(144deg);
-webkit-border-radius: 9px;
}
40%{
-webkit-transform: rotate(180deg);
-webkit-border-radius: 12px;
}
50%{
-webkit-transform: rotate(216deg);
-webkit-border-radius: 14px;
}
60% {
-webkit-transform: rotate(252deg);
-webkit-border-radius: 16px;
}
70% {
-webkit-transform: rotate(288deg);
-webkit-border-radius: 19px;
}
80%{
-webkit-transform: rotate(324deg);
-webkit-border-radius: 22px;
}
to {
-webkit-transform: rotate(360deg);
-webkit-border-radius: 25px;
}
}
/*給方型box一個初步樣式*/
a.box {
display: block;
width: 50px;
height: 50px;
background: red;
margin-bottom: 20px;
}
/*圓型box的樣式,，并在這里應(yīng)用animation*/
a.round {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: green;
-webkit-animation-name: 'round'; /*動畫名稱*/
-webkit-animation-duration: 60s;/*播放一次所持續(xù)時間*/
-webkit-animation-timing-function: ease;/*動畫播放頻率*/
-webkit-animation-iteration-count: infinite;/*動畫播放次涒為無限次*/
}
/*click button效果*/
.click-btn {
background: rgba(125,220,80,0.8);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
-moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3);
padding: 5px 10px;
color: #369;
font-size: 16px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
cursor: pointer;
}
jQuery Code: <script type="text/javascript">
$(document).ready(function(){
$(".click-btn").click(function(){
$(this).siblings().addClass("round");
});
});
</script>
我們載入時box是沒有任何動畫效果的,，當(dāng)我們點擊了click button看給原box上加上一個round的class名，從而觸發(fā)了一個round的動作,。請看效果： 未點擊按鈕時效果（未觸發(fā)動畫效果） 我們這里簡單的介紹了兩個demo的應(yīng)用,，其實大家可以發(fā)揮自己的想像制作出更好更多的動畫效果，如果你對animation制作動畫很感興趣,，你可以參考這幾個網(wǎng)站：webdesignersblog,、slodive、impressivewebs這上面有許多特別有意的動畫demo,。 |
|
|
效果一
變化中效果二
點擊click按鈕開始播放動畫
