您好,登錄后才能下訂單哦!
馬上就2020年了,不知道小伙伴們今年學(xué)習(xí)了css3動畫了嗎?
說起來css動畫是一個很尬的事,一方面因為公司用css動畫比較少,另一方面大部分開發(fā)者習(xí)慣了用JavaScript來做動畫,所以就導(dǎo)致了許多程序員比較排斥來學(xué)習(xí)css動畫(至少我是),但是一個不懂css動畫的前端工程師不能稱之為掌握css3,其實當(dāng)你真正學(xué)習(xí)css動畫之后,你會被它的魅力所吸引的,它可以減少代碼量、提高性能。
上一篇文章我們已經(jīng)一起學(xué)習(xí)了transition 的使用,如果有不了解的同學(xué)可以查看我的上一篇文章。
話不多說,馬上和我一起去學(xué)習(xí)今天的主角animation吧!
值 | 描述 |
---|---|
@keyframes | 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用 |
animation-name | 檢索或設(shè)置對象所應(yīng)用的動畫名稱 ,必須與規(guī)則@keyframes配合使用,因為動畫名稱由@keyframes定義 |
animation-duration | 檢索或設(shè)置對象動畫的持續(xù)時間 |
animation-timing-function | 檢索或設(shè)置對象動畫的過渡類型 |
animation-delay | 檢索或設(shè)置對象動畫的延遲時間 |
animation-iteration-count | 檢索或設(shè)置對象動畫的循環(huán)次數(shù) |
animation-direction | 檢索或設(shè)置對象動畫在循環(huán)中是否反向運動 |
animation-play-state | 檢索或設(shè)置對象動畫的狀態(tài) |
animation翻譯成中文是動畫的意思,熟練運用之后你可以用它來做各種各樣炫酷的動畫。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation:mymove 2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻)
@keyframes主要是做關(guān)鍵幀動畫的,每個@keyframes后面都要跟一個名字,事例中使用了mymove
作為幀動畫的名字,然后可以在樣式內(nèi)對關(guān)鍵幀添加樣式,然后根據(jù)關(guān)鍵幀 @keyframes
就能自動形成流暢的動畫了。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻)
在animation-name
使用之前,我們已經(jīng)定義了一個名為mymove
的幀動畫,這里把幀動畫的名字作為了animation-name的值,含義是當(dāng)前元素將執(zhí)行所設(shè)置的幀動畫。
繼續(xù)看上一個案例,僅僅有幀動畫和需要執(zhí)行的動畫名稱是不足以形成動畫的,我們還需要設(shè)置一個動畫執(zhí)行所需要的時間,這里就用到了animation-duration
屬性,所以上一案例所展示的時間為兩秒鐘執(zhí)行一次。
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:3s;
animation-timing-function:ease-in-out;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}
animation-timing-function
的作用就是改變動畫在每一幀的快慢。這里transition-timing-function
僅展示值為ease-in-out
的動畫效果,可以理解為慢-快-慢
。其他的不做展示,可以參考下表進(jìn)行理解。
值 | 描述 |
---|---|
linear | 動畫從頭到尾的速度是相同的。 |
ease | 默認(rèn)。動畫以低速開始,然后加快,在結(jié)束前變慢。 |
ease-in | 動畫以低速開始。 |
ease-out | 動畫以低速結(jié)束。 |
ease-in-out | 動畫以低速開始和結(jié)束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中自己的值??赡艿闹凳菑?0 到 1 的數(shù)值。 |
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-delay:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻)
這里animation-delay
的值為2s
,意思是動畫將在延遲兩秒秒后延遲執(zhí)行。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
這里animation-iteration-count
的值為infinite
,意思是動畫將會無限次的執(zhí)行,這也就達(dá)到了循環(huán)的效果,當(dāng)然你還可以給它具體的數(shù)值,當(dāng)執(zhí)行你設(shè)置的次數(shù)后它會自動停止。
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻)
這里animation-direction
的值為alternate
,代表動畫將會來回的反復(fù)執(zhí)行,他還有其它屬性,在下表給出供小伙伴們自己嘗試。
值 | 描述 |
---|---|
normal | 默認(rèn)值。動畫按正常播放。 |
reverse | 動畫反向播放。 |
alternate | 動畫在奇數(shù)次(1、3、5...)正向播放,在偶數(shù)次(2、4、6...)反向播放。 |
alternate-reverse | 動畫在奇數(shù)次(1、3、5...)反向播放,在偶數(shù)次(2、4、6...)正向播放。 |
initial | 設(shè)置該屬性為它的默認(rèn)值。 |
inherit | 從父元素繼承該屬性。 |
<style>
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
</style>
<body>
<button onclick="pause()">暫停</button>
<button onclick="run()">恢復(fù)</button>
<div></div>
</body>
function pause(){
document.querySelector('div').style.animationPlayState="paused"
}
function run(){
document.querySelector('div').style.animationPlayState="running"
}
animation-play-state
的默認(rèn)值為running
,就是動畫執(zhí)行的意思,在實際應(yīng)用中我們經(jīng)常使用js來操作這個屬性,從而控制動畫的播放和暫停。
今天我們一共學(xué)習(xí)了八個屬性值,他們都是屬于animation
屬性的,這里給出屬性值在animation
中的簡寫方式。
animation: name duration timing-function delay iteration-count direction play-state;
div{
animation:mymove 2s ease-in-out 3s infinite alternate running;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 767273102 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻)
那么這里的意思就是mymove
動畫將在三秒鐘后開始,以兩秒一個循環(huán)慢-快-慢方式,進(jìn)行動畫的展示,并且每次動畫過后都會向相反方向執(zhí)行動畫。
經(jīng)過以上的學(xué)習(xí),相信你已經(jīng)初步了解了animation
的用法,隨著你對animation
的深入理解,是可以做一些有創(chuàng)造性的動畫的,你可以看看自己之前用js寫的各種動畫,嘗試著用我們兩篇文章所學(xué)的內(nèi)容進(jìn)行修改,相信你一定會對這兩個屬性有更深的理解。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。