溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何實現css3動畫屬性之Transitions屬性與Animations屬性的功能

發布時間:2020-07-20 11:42:20 來源:億速云 閱讀:254 作者:Leah 欄目:web開發

本篇文章給大家分享的是有關如何實現css3動畫屬性之Transitions屬性與Animations屬性的功能,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

1 Transitions功能

(1)瀏覽器支持:

到目前為止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上、IE11以上瀏覽器支持該功能。

(2)功能

在CSS3中,Transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內平滑過渡到另一個屬性值來實現動畫功能。

(3)使用方法

transition:property duration timing-function

property:表示對哪個屬性進行平滑過渡。

duration:表示在多久時間內完成屬性值得平滑過渡。

timing-function:表示通過什么方法進行平滑過渡。

div{
background-color:#ffff00;
transition:background-color 1s linear;//在1秒內讓div元素的背景色從黃色平滑過渡到淺藍色。
}
div{
background-color:#00ffff;
}

(4)另一種使用方法

transition-property:background-color;
transition-duration:1;
transition-timing-function:linear;

(5)transition-delay屬性

指定變換動畫特效延遲多久后開始執行??梢杂妹雴挝换蚝撩雴挝恢付▽傩灾?。

transition-delay:1s;
//或 transition:background-color 1s linear 2s;(在第四個參數中書寫延遲時間)

(6)使用Transitions功能同時平滑過渡多個屬性值

transition:background-color 1s linear,color 1s linear,width 1s linear;

(7)移動、旋轉等動畫效果

img{
position:absolute;top:70px;left:0;
transform:rotate(0deg);
transition:left 1s linear,transform 1s linear;
}
 img:hover{
left:30px;
transform:rotate(720deg);
}

(8)缺點

只能指定屬性的開始值與終點值,然后再這兩個屬性值之間實現平滑過渡,不能實現更為復雜的動畫效果。

2 Animations功能

(1)瀏覽器支持:

到目前為止:Safari4以上、Chrome2以上、Firefox20以上、Opera18以上、IE11以上瀏覽器支持該功能。

(2)功能

與Transitions功能相同,都是通過改變元素的屬性值來實現動畫效果。

區別:Animations功能通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為復雜的動畫效果。

(3)創建關鍵幀的集合

@keyframes 關鍵幀集合名{  創建關鍵幀的代碼  }

(4)創建關鍵幀的代碼(類似如下)

40%{ 本關鍵幀中的樣式代碼 }

(40%表示改幀位于整個動畫過程中的40%處,開始幀為0%,結束幀為100%)

@keyframes mycolor{
0%{
background-color:red;
}
40%{
background-color:darkblue;
}
70%{
background-color:yellow;
}
100%{
background-color:red;
}
}

(5)在元素的樣式中使用該關鍵幀的集合

div{
animation-name:my-color; //指定關鍵幀集合的名稱
animation-duration:5s; //指定完成整個動畫所花費的時間
animation-timing-function:linear; //指定實現動畫的方法
}

(6)其他屬性

animation-delay:用于指定延遲多少秒或毫秒后開始執行動畫。

animation-iteration-count:用于指定動畫的執行次數,可指定為infinite(無限次)。

animation-direction:用于指定動畫的執行方向??芍付▽傩灾蛋ǎ?/p>

  • normal:初始值(動畫執行完畢后返回初始狀態)

  • alternate:交替更換動畫的執行方向

  • reverse:反方向執行動畫

  • alternate-reverse:從反方向開始交替更改動畫的執行方向

(7)在一行樣式代碼中定義animation動畫時采用如下所示的書寫方式

animation:keyframe的名稱 動畫的執行時長 動畫的實現方法  延遲多少秒后開始執行動畫 動畫的執行次數 動畫的執行方向;

(8)實現多個屬性值同時改變的動畫

只需只在各關鍵幀中同時指定這些屬性值就可以了。

3 實現動畫的方法

方法屬性值的變化速度
linear在動畫開始時與結束時以同樣速度進行改變
ease-in動畫開始時速度很,然后速度沿曲線值進行加快
ease-out動畫開始時速度很,然后速度沿曲線值進行放慢
ease動畫開始時速度很,然后速度沿曲線值進行加快,然后再沿曲線值進行放慢
ease-in-out動畫開始時速度很,然后速度沿曲線值進行加快,然后再沿曲線值進行放慢

4 實現網頁的淡入效果

通過在開始幀與結束幀中改變頁面的opacity屬性的屬性值來實現頁面的淡入效果。

@keyframes fadein{
0%{
opacity:0;
background-color:white;
}
100%{
opacity:1;
background-color:white;
}
body{
animation-name: fadein; 
animation-duration:5s; 
animation-timing-function:linear; 
animation-iteration-count:1;
}

以上就是如何實現css3動畫屬性之Transitions屬性與Animations屬性的功能,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女