css的動畫和過渡


一、過渡:

transition    簡寫屬性,用於在一個屬性中設置四個過渡屬性。

transition-property   規定應用過渡的 CSS 屬性的名稱。

transition-duration    定義過渡效果花費的時間。默認是 0。

transition-timing-function   規定過渡效果的時間曲線。默認是 "ease"。

transition-delay         規定過渡效果何時開始。默認是 0。

eg:

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; } 
二、動畫:

@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。

1、animation    所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。

2、animation-name     規定 @keyframes 動畫的名稱。

3、animation-duration   規定動畫完成一個周期所花費的秒或毫秒。默認是 0。

4、animation-timing-function      規定動畫的速度曲線。默認是 "ease"。

5、animation-delay       規定動畫何時開始。默認是 0。

6、animation-iteration-count       規定動畫被播放的次數。默認是 1。

7、animation-direction      規定動畫是否在下一周期逆向地播放。默認是 "normal"。

8、animation-play-state    規定動畫是否正在運行或暫停。默認是 "running"。

9、animation-fill-mode      規定對象動畫時間之外的狀態。

eg:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; } 


 



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



CSS過渡和動畫 CSS3動畫與過渡 css3過渡和動畫 CSS過渡動畫之transition CSS3過渡與動畫 【CSS】過渡、動畫和變換 CSS3過渡和動畫 CSS3過渡和動畫 CSS變化、過渡與動畫 CSS3動畫基本的轉換和過渡
 
粤ICP备14056181号  © 2014-2021 ITdaan.com