css3實現(xiàn)動畫的三種方式

這是一個考驗面試者對css的基礎(chǔ)知識。
css 實現(xiàn)動畫主要有3種方式
第一種是: transition 實現(xiàn)漸變動畫
第二種是: transform 轉(zhuǎn)變動畫
第三種是: animation 實現(xiàn)自定義動畫
下面具體講一下3種動畫的實現(xiàn)方式。
transition漸變動畫
我們先看一下 transition 的屬性:
- property:填寫需要變化的css屬性如:width,line-height,font-size,color等,所有作用與dom樣式的屬性;
- duration:完成過渡效果需要的時間單位(s或者ms)
- timing-function:完成效果的速度曲線(linear,ease,ease-in,ease-out等等)
timing-function具體的值可以看下面的表格:
值 | 描述 |
---|---|
linear | 勻速(等于 cubic-bezier(0,0,1,1)) |
ease | 從慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1)) |
ease-in | 慢慢變快(等于 cubic-bezier(0.42,0,1,1)) |
ease-out | 慢慢變慢(等于 cubic-bezier(0,0,0.58,1)) |
ease-in-out | 先變快再到慢(等于 cubic-bezier(0.42,0,0.58,1)),漸顯漸隱效果 |
cubic-bezier( n , n , n , n ) | 在 cubic-bezier 函數(shù)中定義自己的值??赡艿闹凳?0 至 1 之間的數(shù)值 |
- delay: 動畫效果的延遲觸發(fā)時間(單位ms或者s)
下面我們看一個完整的例子:
<div class="base"></div>
.base { width: 100px; height: 100px; display: inline-block; background-color: #0EA9FF; border-width: 5px; border-style: solid; border-color: #5daf34; transition-property: width,height,background-color,border-width; transition-duration: 2s; transition-timing-function: ease-in; transition-delay: 500ms; /*簡寫*/ /*transition: all 2s ease-in 500ms;*/ &:hover { width: 200px; height: 200px; background-color: #5daf34; border-width: 10px; border-color: #3a8ee6; } }
運(yùn)行效果:
可以看到,鼠標(biāo)移上去的時候,動畫延遲0.5s開始,并且由于 border-color 沒有設(shè)置到 transition-property 里面,所以是沒有漸變動畫的。
transform轉(zhuǎn)變動畫
transform屬性應(yīng)用于2D 或 3D轉(zhuǎn)換。該屬性允許我們能夠?qū)υ剡M(jìn)行旋轉(zhuǎn)、縮放、傾斜、移動這四類操作.一般是配合transition的屬性一起使用。
- none:定義不進(jìn)行任何轉(zhuǎn)換,一般用于注冊掉該轉(zhuǎn)換。
- transform-functions:定義要進(jìn)行轉(zhuǎn)換的類型函數(shù)。主要有:
2.1 旋轉(zhuǎn)(rotate):主要分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)。rotate(angle),2D 旋轉(zhuǎn),參數(shù)為角度,如45deg;rotate(x,y,z,angle),3D旋轉(zhuǎn),圍繞原地到(x,y,z)的直線進(jìn)行3D旋轉(zhuǎn);rotateX(angle),沿著X軸進(jìn)行3D旋轉(zhuǎn);rotateY(angle);rotateZ(angle);
2.2 縮放(scale):一般用于元素的大小收縮設(shè)定。主要類型同上,有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z),其中x、y、z為收縮比例。
2.3 傾斜(skew):主要用于對元素的樣式傾斜。skew(x-angle, y-angle),沿著x和y軸的2D傾斜轉(zhuǎn)換;skewX(angle),沿著x軸的2D傾斜轉(zhuǎn)換;skew(angle),沿著y軸的2D傾斜轉(zhuǎn)換。
2.4 移動(translate):主要用于將元素移動。translate(x, y),定義向x和y軸移動的像素點;translate(x, y, z),定義像x、y、z軸移動的像素點;translateX(x);translateY(y);translateZ(z)。
<h5>transition配合transform一起使用</h5> <div class="base base2"></div>
.base2{ transform:none; transition-property: transform; &:hover { transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px); } }
運(yùn)行效果:
可以看到盒子發(fā)生了旋轉(zhuǎn),傾斜,平移,放大。
animation自定義動畫
為了實現(xiàn)更靈活的動畫效果,css3還提供了自定義動畫的功能。
(1) name:需要綁定到選擇器的keyframe名稱。
(2) duration:完成該動畫需要花費的時間,秒或毫秒。
(3) timing-function:跟transition-linear一樣。
(4) delay:設(shè)置動畫在開始之前的延遲。
(5) iteration-count:設(shè)置動畫執(zhí)行的次數(shù),infinite為無限次循環(huán)。
(6) direction:是否輪詢反向播放動畫。normal,默認(rèn)值,動畫應(yīng)該正常播放;alternate,動畫應(yīng)該輪流反向播放。
<h5 class="title">animate自定義動畫</h5> <div class="base base3"></div>
.base3 { border-radius: 50%; transform:none; position: relative; width: 100px; height: 100px; background: linear-gradient( 35deg, #ccffff, #ffcccc ); &:hover { animation-name: bounce; animation-duration: 3s; animation-iteration-count: infinite; } } @keyframes bounce{ 0% { top: 0px; } 50% { top: 249px; width: 130px; height: 70px; } 100% { top: 0px; } }
運(yùn)行效果:
可以看到,自定義動畫能實現(xiàn)更靈活的動畫效果,包括了第一種和第二種動畫的所有功能,而且屬性也更全面。
以上代碼可以在線體驗:地址
以上就是css3實現(xiàn)動畫的三種方式的詳細(xì)內(nèi)容,更多關(guān)于css3實現(xiàn)動畫的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何使用css3實現(xiàn)一個類在線直播的隊列動畫的示例代碼
這篇文章主要介紹了如何使用css3實現(xiàn)一個類在線直播的隊列動畫的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下2020-06-17- 有好多小伙伴私聊我問我html5新特性 和用法,下面我給大家具體介紹一下html5都新加了哪些新特性,感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-13
使用html5新特性輕松監(jiān)聽任何App自帶返回鍵的示例
這篇文章主要介紹了使用html5新特性輕松監(jiān)聽任何App自帶返回鍵的示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-13- 這篇文章主要介紹了HTML5新特性之type=file文件上傳功能,需要的朋友可以參考下2018-02-02
- HTML5 只有一個簡單的文檔類型:<!DOCTYPE html>,表示瀏覽器會按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標(biāo)簽,感興趣的朋友一起看看吧2017-10-31
- HTML5想必大家都很熟悉了,因為太多的媒體在討論這一技術(shù)。所以當(dāng)我們在面試前端工作的時候,遇到html5相關(guān)的問題一點也不意外,想要順利通過前端面試?下面這篇文章就來跟2017-09-05
- 這篇文章主要介紹了CSS3動畫和HTML5新特性詳解,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-31