css3中animation動畫共有六個屬性分別是動畫名稱，完成動畫所需時間，速度，延遲，播放速度以及是否有反向播放，本篇文章將和大家詳細分享有關css3中animation動畫屬性的方法，有一定的參考價值，希望對大家有幫助。
CSS主要是用於描繪網頁的樣式和佈局而CSS3 是最新的CSS 標準，提供了更多的方法而且使用CSS3，可以創建動畫，使網頁內容更加豐富今天將和大家分享css3中的動畫屬性－animation
注意在使用過程中瀏覽器相容問題
Internet Explorer 10、Firefox 以及Opera 支援animation 屬性。
Safari 和Chrome 支援-webkit-animation 屬性
所以在寫入程式的過程中應考慮到瀏覽器相容問題
animation 屬性
用來設定六個動畫屬性：
（1）animation-name：規定動畫的名稱。
animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中 -webkit-animation-name:demo//Safari 和 Chrome
（2）animation-duration：完成動畫所花費的時間（以秒和毫秒為單位）
animation-duration：3s； -webkit-animation-duration:3s;
（3）animation-timing-function：動畫速度曲線
linear ：以勻速播放
ease ：剛開始動畫速度慢然後加速在結束時變慢 （預設）
ease-in ：指動畫以低速開始
#ease-out ：指動畫以低速結束。
ease-in-out ：動畫以低速開始和結束
cubic-bezier(n,n,n,n) ：在cubic-bezier 函數中設定想要的值，是從0 到1 的數值
animation-timing-function：ease； -webkit-animation-timing-function:ease;
（4）animation-delay：動畫開始延遲時間
animation-delay：3s； -webkit-animation-delay:3s;
（5）animation-iteration-count：動畫播放的次數
animation-iteration-count：4；//循环四次 -webkit-animation-iteration-count:infinite;//循环无数次
animation-direction：normal; -webkit-animation-direction:alternate;
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate;
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
0% {background-color: pink;left:0;top:40px;}
25%{background-color: hotpink;left:300px;top:40px;}
50%{background-color: yellow;left:300px;top:340px;}
75%{background-color: blue;left:0;top:340px;}
100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
0% {background-color: pink;left:0;top:40px;}
25%{background-color: hotpink;left:300px;top:40px;}
50%{background-color: yellow;left:300px;top:340px;}
75%{background-color: blue;left:0;top:340px;}
100%{background-color: green;left:0;top:30px;}
}
</style>以上是css3中animation動畫屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
