CSS3(animation,?trasfrom)總結

1.?Animation

樣式寫法:

格式:?@-瀏覽器內核-keyframes?樣式名?{}

?

標準寫法(chrome?safari不支持

@keyframes??[樣式名]?{

0%?{left:?10px?;?top?:?20px;}

50%?{left:?20px?;?top?:?30px;}

100%?{left:?10px?;?top?:?20px;}

};

???????

????????Firefox

@-mz-keyframes??[樣式名]?{

0%?{left:?10px?;?top?:?20px;}

50%?{left:?20px?;?top?:?30px;}

100%?{left:?10px?;?top?:?20px;}

};

?

Chrome?&?Safari

@-webkit-keyframes??[樣式名]?{

0%?{left:?10px?;?top?:?20px;}

50%?{left:?20px?;?top?:?30px;}

100%?{left:?10px?;?top?:?20px;}

};

?

Opern

@-o-keyframes??[樣式名]?{

0%?{left:?10px?;?top?:?20px;}

50%?{left:?20px?;?top?:?30px;}

100%?{left:?10px?;?top?:?20px;}

};

?

或者是

?

@keyframes?[樣式名]?{

from?{left:0px;?top:10px;}

to???{left:20px;?top:?50px;}

}

?

樣式引用:

????????Style=”animation:樣式名?時間?播放曲線”

eg:

?????樣式:

????????@-webkit-keyframes?testRule?{

????????????20%??{left:100px;?top:50px;}

????????????40%??{left:50px;?top:?100;}

????????????60%??{left:50px;?top:?50;}

????????????80%??{left:100px;?top:?0;}

????????????100%?{left:0px;?top:0px;}

}

?

??????元素:

??????<div?style=”position:absolute;width:100px;?height:100px;?-webkit-animation:?testRule?5s?linear”>?</div>

?

說明:?

????0s-?1s??DIV從最開始位置?到?{left:100px;?top:50px;}

????1s?-2s??{left:100px;?top:50px;}?到?{left:50px;?top:?100;}

????2s?-3s??{left:50px;?top:?100;}?到?{left:50px;?top:?50;}

????3s?-?4s??{left:50px;?top:?50;}?到?{left:100px;?top:?0;}

4s?-?5s??{left:100px;?top:?0;}?到?{left:0px;?top:0px;}

?

CSS3?Animation?所具有的屬性:

@keyframes?所有規定動畫

Aniamtion:??所有規定動畫簡寫屬性,?除了animation-play-state?屬性

Animation-name?規定@keyframes?動畫的名稱

Animation-duration?規定動畫完成一個周期所花費的秒或毫秒.?默認是?0?

Animation-timing-function:規定動畫的速度曲線.默認是?0?

Aniamtion-delay??規定動畫從什么時候開始??默認是0

Aniamtion-iteration-count??規定動畫播放幾遍?默認是1

Animation-direction?規定動畫是否在下一周期逆向地播放.?默認是?”?normal”

Animation-play-state?:規定動畫的當前狀態?“paused”?or?“running”?.默認是?”running”

Animation-fill-mode?:規定對象動畫時間之外的狀態

?

ps:Animation-play-state?:?當在移動端使用時,?如果樣式中存在trasfrom?則會不起作用(原因未知)

?

?

?

?

?

?

?

CSS3屬性??對應??dom對象屬性

?????????????

Aniamtion?	Dom.style.webkitAnimation(根據瀏覽器內核而定)
	Dom.style.animation
Animation-name?	Dom.style.webkitAnimationName
Animation-duration	Dom.style.webkitAnimationDuration
Animation-timing-function:	Dom.style.webkitAnimationTimingFunction
Aniamtion-delay	Dom.style.webkitAnimationDelay
Aniamtion-iteration-count	Dom.style.webkitAnimationIterationCount
Animation-direction	Dom.style.webkitAnimationDirection
Animation-play-state?	Dom.style.webkitAnimationPlayState
Animation-fill-mode?	Dom.style.webkitAnimationFillMode

?

?

樣式動態生成動態引入

styleSheets

?

chorome中

document.styleSheets??//獲取所有的樣式鏈表文件內容

var??sst?=?document.styleSheets[0]?//獲取第0個樣式鏈表

var?str?=?“@keyframes?name?{0%?{left:20px;?}?100%{left:60px;}}”;

//將樣式str?插入到?第0?個位置的樣式文件中

sst.insertRule(str)

//獲取第0?個樣式文件中第0個樣式對象

sst.cssRules[0]

?

控制Animation播放時間

Dom.style.webkitAnimationDelay = “-” + time + "s";

dom.display = "none";

dom.offsetHeight = "";

dom.display = "block";

?

2?transform

http://www.w3school.com.cn/cssref/pr_transform.asp

?

轉載于:https://www.cnblogs.com/lionsblog/p/4537669.html

總結

以上是生活随笔為你收集整理的CSS3(animation, trasfrom)总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。