您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“css3怎么設(shè)置動(dòng)畫”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3怎么設(shè)置動(dòng)畫”吧!
首先我們來了解一下css3實(shí)現(xiàn)簡單動(dòng)畫需要用到的屬性:animation屬性,@keyframes“規(guī)則”。
animation屬性和@keyframes“規(guī)則”是css3新增的屬性,animation屬性可用來給動(dòng)畫設(shè)置許多的CSS樣式,例如color,background-color,height,或width。
我們先通過@keyframes“規(guī)則”定義,再在animation屬性里調(diào)用,就可以實(shí)現(xiàn)一個(gè)簡單的動(dòng)畫效果了。
如下所示:實(shí)現(xiàn)背景顏色的不斷切換
.element{
animation:pulse5sinfinite;
}
@keyframespulse{
0%{
background-color:#001F3F;
}
100%{
background-color:#FF4136;
}
}
運(yùn)行后,背景顏色會(huì)不斷的進(jìn)行變化,在#001F3F顏色值到#FF4136顏色值過渡變化,之間也會(huì)顯示一些過渡的背景色。大家可以自己動(dòng)手試試效果。
每個(gè)@keyframes規(guī)則定義了在動(dòng)畫期間中的特定時(shí)刻應(yīng)該發(fā)生的事情。例如,0%是動(dòng)畫的開頭,100%是結(jié)束。然后可以通過速記animation屬性或其八個(gè)子屬性來控制這些關(guān)鍵幀,以更好地控制應(yīng)如何操縱這些關(guān)鍵幀。
下面我們來看看animation屬性的子屬性有哪些?有什么作用?
1、animation-name:聲明@keyframes要操作的at-rule的名稱。
2、animation-duration:動(dòng)畫完成一個(gè)循環(huán)所需的時(shí)間長度。
3、animation-timing-function:建立預(yù)設(shè)的加速度曲線,如ease或linear。
4、animation-delay:正在加載的元素和動(dòng)畫序列的開始之間的時(shí)間。
5、animation-direction:設(shè)置循環(huán)后動(dòng)畫的方向。它的默認(rèn)值在每個(gè)周期重置。
6、animation-iteration-count:動(dòng)畫應(yīng)執(zhí)行的次數(shù)。
7、animation-fill-mode:設(shè)置在動(dòng)畫之前/之后應(yīng)用的值。
例如,我們可以將動(dòng)畫的最后狀態(tài)設(shè)置為保留在屏幕上,也可以將其設(shè)置為在動(dòng)畫開始之前切換回。
8、animation-play-state:暫停/播放動(dòng)畫。
然后可以像這樣使用這些子屬性:
@keyframesstretch{
/*在這里聲明動(dòng)畫的動(dòng)作*/
}
.element{
animation-name:stretch;
animation-duration:1.5s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-fill-mode:none;
animation-play-state:running;
}
/*
相同:
*/
.element{
animation:
stretch
1.5s
ease-out
0s
alternate
infinite
none
running;
}
到此,相信大家對“css3怎么設(shè)置動(dòng)畫”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。