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動畫屬性的使用方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。