本篇文章給大家帶來的內容是關于css3的動畫(animation)屬性的詳解(附代碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

css3動畫(animation)具有以下屬性：

1、animation-name 自定義動畫名稱

2、animation-duration 動畫指定需要多少秒或毫秒完成，默認值是0;

3、animation-timing-function 動畫的時間曲線，linear 勻速， ease 先慢后快，結束前變慢 。

4、animation-delay 動畫在啟動前的延遲間隔，默認是0

5、animation-iteration-count 動畫的播放次數，默認是1

6、animation-direction 是否輪流反向播放動畫

7、animation-play-state 動畫是否正在運行或已暫停。 值：paused 指定暫停動畫 ； running 指定正在運行的動畫，默認。

實例：本demo以平移(translate)為例說明動畫的整個過程

html:

css:

.warp{

height: 100px;

width: 100px;

border: 1px solid #eee;

animation-name:moves;

animation-direction:alternate;

animation-delay: 0.2s;

animation-duration: 5s;

animation-play-state: paused;

animation-iteration-count: 3;

/*以上可以簡寫成：*/

animation: moves 5s linear 0.2s 3;

}

@keyframes moves{ /*動畫名稱自定義*/

10%{ /*時間點可以任意，10%表示當時間進行到10%是元素要達到的狀態*/

transform: translate(100px,0);

-ms-transform:translate(100px,0); /*IE 9*/

-moz-transform:translate(100px,0); /* Firefox */

-webkit-transform:translate(100px,0); /* Safari 和 Chrome */

-o-transform:translate(100px,0); /* Opera */

}

30%{ /*時間點可以任意*/

transform: translate(100px,100px);

-ms-transform:translate(100px,100px); /*IE 9*/

-moz-transform:translate(100px,100px); /* Firefox */

-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */

-o-transform:translate(100px,100px); /* Opera */

}

60%{ /*時間點可以任意*/

transform: translate(0,100px);

-ms-transform:translate(0,100px); /*IE 9*/

-moz-transform:translate(0,100px); /* Firefox */

-webkit-transform:translate(0,100px); /* Safari 和 Chrome */

-o-transform:translate(0,100px); /* Opera */

}

100%{ /*時間點可以任意*/

transform: translate(0,0);

-ms-transform:translate(0,0); /*IE 9*/

-moz-transform:translate(0,0); /* Firefox */

-webkit-transform:translate(0,0); /* Safari 和 Chrome */

-o-transform:translate(0,0); /* Opera */

}

}

相關推薦：

怎么純用css代碼使文字展示閃動效果？(代碼示例)

如何使用CSS 和D3實現擺線搖擺的效果動畫

總結

以上是生活随笔為你收集整理的css动画定义,css3的动画(animation)属性的详解（附代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

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