您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)如何實(shí)現(xiàn)css3動畫屬性之Transitions屬性與Animations屬性的功能,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
(1)瀏覽器支持:
到目前為止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上、IE11以上瀏覽器支持該功能。
(2)功能
在CSS3中,Transitions功能通過將元素的某個屬性從一個屬性值在指定的時間內(nèi)平滑過渡到另一個屬性值來實(shí)現(xiàn)動畫功能。
(3)使用方法
property:表示對哪個屬性進(jìn)行平滑過渡。
duration:表示在多久時間內(nèi)完成屬性值得平滑過渡。
timing-function:表示通過什么方法進(jìn)行平滑過渡。
div{ background-color:#ffff00; transition:background-color 1s linear;//在1秒內(nèi)讓div元素的背景色從黃色平滑過渡到淺藍(lán)色。 } div{ background-color:#00ffff; }
(4)另一種使用方法
transition-property:background-color; transition-duration:1; transition-timing-function:linear;
(5)transition-delay屬性
指定變換動畫特效延遲多久后開始執(zhí)行。可以用秒單位或毫秒單位指定屬性值。
transition-delay:1s; //或 transition:background-color 1s linear 2s;(在第四個參數(shù)中書寫延遲時間)
(6)使用Transitions功能同時平滑過渡多個屬性值
transition:background-color 1s linear,color 1s linear,width 1s linear;
(7)移動、旋轉(zhuǎn)等動畫效果
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)缺點(diǎn)
只能指定屬性的開始值與終點(diǎn)值,然后再這兩個屬性值之間實(shí)現(xiàn)平滑過渡,不能實(shí)現(xiàn)更為復(fù)雜的動畫效果。
(1)瀏覽器支持:
到目前為止:Safari4以上、Chrome2以上、Firefox20以上、Opera18以上、IE11以上瀏覽器支持該功能。
(2)功能
與Transitions功能相同,都是通過改變元素的屬性值來實(shí)現(xiàn)動畫效果。
區(qū)別:Animations功能通過定義多個關(guān)鍵幀以及定義每個關(guān)鍵幀中元素的屬性值來實(shí)現(xiàn)更為復(fù)雜的動畫效果。
(3)創(chuàng)建關(guān)鍵幀的集合
@keyframes 關(guān)鍵幀集合名{ 創(chuàng)建關(guān)鍵幀的代碼 }
(4)創(chuàng)建關(guān)鍵幀的代碼(類似如下)
40%{ 本關(guān)鍵幀中的樣式代碼 }
(40%表示改幀位于整個動畫過程中的40%處,開始幀為0%,結(jié)束幀為100%)
@keyframes mycolor{ 0%{ background-color:red; } 40%{ background-color:darkblue; } 70%{ background-color:yellow; } 100%{ background-color:red; } }
(5)在元素的樣式中使用該關(guān)鍵幀的集合
div{ animation-name:my-color; //指定關(guān)鍵幀集合的名稱 animation-duration:5s; //指定完成整個動畫所花費(fèi)的時間 animation-timing-function:linear; //指定實(shí)現(xiàn)動畫的方法 }
(6)其他屬性
animation-delay:用于指定延遲多少秒或毫秒后開始執(zhí)行動畫。
animation-iteration-count:用于指定動畫的執(zhí)行次數(shù),可指定為infinite(無限次)。
animation-direction:用于指定動畫的執(zhí)行方向??芍付▽傩灾蛋ǎ?/p>
normal:初始值(動畫執(zhí)行完畢后返回初始狀態(tài))
alternate:交替更換動畫的執(zhí)行方向
reverse:反方向執(zhí)行動畫
alternate-reverse:從反方向開始交替更改動畫的執(zhí)行方向
(7)在一行樣式代碼中定義animation動畫時采用如下所示的書寫方式
animation:keyframe的名稱 動畫的執(zhí)行時長 動畫的實(shí)現(xiàn)方法 延遲多少秒后開始執(zhí)行動畫 動畫的執(zhí)行次數(shù) 動畫的執(zhí)行方向;
(8)實(shí)現(xiàn)多個屬性值同時改變的動畫
只需只在各關(guān)鍵幀中同時指定這些屬性值就可以了。
方法 | 屬性值的變化速度 |
linear | 在動畫開始時與結(jié)束時以同樣速度進(jìn)行改變 |
ease-in | 動畫開始時速度很慢,然后速度沿曲線值進(jìn)行加快 |
ease-out | 動畫開始時速度很快,然后速度沿曲線值進(jìn)行放慢 |
ease | 動畫開始時速度很慢,然后速度沿曲線值進(jìn)行加快,然后再沿曲線值進(jìn)行放慢 |
ease-in-out | 動畫開始時速度很慢,然后速度沿曲線值進(jìn)行加快,然后再沿曲線值進(jìn)行放慢 |
通過在開始幀與結(jié)束幀中改變頁面的opacity屬性的屬性值來實(shí)現(xiàn)頁面的淡入效果。
@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; }
以上就是如何實(shí)現(xiàn)css3動畫屬性之Transitions屬性與Animations屬性的功能,小編相信有部分知識點(diǎn)可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。