- 相關(guān)推薦
CSS的animation屬性使用實例分析
下面是小編整理的CSS的animation屬性使用實例分析內(nèi)容，歡迎學(xué)習(xí)!更多內(nèi)容請關(guān)注應(yīng)屆畢業(yè)生考試網(wǎng)!
一、animation的語法
1、@keyframes——插入關(guān)鍵幀
(1)FormTo形式：
CSS Code復(fù)制內(nèi)容到剪貼板
@keyframes demo {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
(2)百分比的形式：
CSS Code復(fù)制內(nèi)容到剪貼板
@keyframes demo {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
2、animation-name——定義動畫的名稱
animation-name: none | “動畫的名稱”;
(1)動畫的名稱是由Keyframes創(chuàng)建的動畫名，這里必須和創(chuàng)建的動畫名保持一致。如果不一致,將不能實現(xiàn)任何動畫效果
(2)none為默認值，當(dāng)值為none時，將沒有任何動畫效果
3、animation-duration
animation-duration: time (s)
animation-duration是指定元素播放動畫所持續(xù)的時間，取值為數(shù)值，單位為秒(s)，其默認值為“0”。
4、animation-timing-function
animation-timing-function:ease(緩沖) || ease-in(加速) || ease-out(減速) || ease-in-out(先加速后減速) || linear(勻速) || cubic-bezier(自定義一個時間曲線)
animation-timing-function是用來指定動畫的播放方式，具有以下六種變換方式：ease(緩沖);ease-in(加速);ease-out(減速);ease-in-out(先加速后減速);linear(勻速);cubic-bezier(自定義一個時間曲線)。
5、animation-delay
animation-delay: time(s)
animation-delay:是用來指定元素動畫開始時間。取值為數(shù)值，單位為秒(s)，其默認值為“0”。這個屬性和animation-duration使用方法是一樣的。
6、animation-iteration-count
animation-iteration-count:infinite || number
animation-iteration-count是指定元素播放動畫的循環(huán)次數(shù)，其取值為數(shù)字，默認值為“1”或者infinite(無限次數(shù)循環(huán))。
7、animation-direction
animation-direction: normal || alternate
animation-direction是指定元素動畫播放的方向，如果是normal，那么動畫的每次循環(huán)都是向前播放;如果是alternate，那么動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
8、animation-play-state
animation-play-state:running || paused
animation-play-state主要是用來控制元素動畫的播放狀態(tài)。其主要有兩個值，running和paused，其中running為默認值。這個屬性目前很少內(nèi)核支持，所以只是稍微提一下。
二、animation事件接口
其實目前基本的就是三個事件而已：開始、迭代、結(jié)束。開始和結(jié)束都知道是什么意思。至于這個迭代，由于animation中有個iteration-count屬性，它可以定義動畫重復(fù)的次數(shù)，因此動畫會有許多次開始和結(jié)束。但是真正的“開始”和“結(jié)束”事件是關(guān)于整個動畫的，他們只會觸發(fā)一次，而中間由于重復(fù)動畫引起的“結(jié)束并開始下一次”將觸發(fā)整個“迭代”事件。
這三個事件的標準名稱是：
開始：animationstart
迭代：animationiteration
結(jié)束：animationend
但是目前版本的Chrome需要加上webkit前綴，而且還要注意大小寫
開始：webkitAnimationStart
迭代：webkitAnimationIteration
結(jié)束：webkitAnimationEnd
最后是實例代碼和截圖
CSS Code復(fù)制內(nèi)容到剪貼板
<style>
@-webkit-keyframes test {
0% {background:red;}
25% {background:green;}
50% {background:blue;}
100% {background:red;}
}
@keyframes test {
0% {background:red;}
25% {background:green;}
50% {background:blue;}
100% {background:red;}
}
</style>
<script>
onload=function(){
var html=document.documentElement;
//定義事件回調(diào)函數(shù)
var start=function(){
console.log("start");
},iteration=function(e){
console.log(e);
},end=function(){
console.log("end");
};
//綁定事件
html.addEventListener("webkitAnimationIteration",iteration);
html.addEventListener("animationiteration",iteration);
html.addEventListener("webkitAnimationStart",start);
html.addEventListener("animationstart",start);
html.addEventListener("webkitAnimationEnd",end);
html.addEventListener("animationend",end);
//開始執(zhí)行動畫
html.style.animation=
html.style.WebkitAnimation=
"test 1s linear 0s 3";
};
</script
【CSS的animation屬性使用實例分析】相關(guān)文章：
CSS3中的opacity屬性使用教程06-20
css設(shè)置層透明實例07-16
CSS和JavaScript腳本實例10-26
CSS中的zoom屬性和scale屬性的用法及區(qū)別08-31
讓網(wǎng)站變灰的css代碼實例05-30
CSS+p實現(xiàn)懸浮效果的實例10-05
用CSS讓p層水平居中實例10-01
用CSS讓DIV層水平居中實例10-20