css3中animation動畫屬性如何使用

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：動畫播放的次數

############################## n: 自訂動畫播放次數的數值######infinite ：指動畫無限次循環播放    ###

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

###（6）animation-direction：動畫是否輪流反向播放   ###### normal動畫應該正常播放  （預設）######alternate    動畫應該輪流反向播放    ###

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有所了解########## ########################## ###

以上是css3中animation動畫屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！