面試官: css3動(dòng)畫(huà)了解嗎? 我: .......

番茄西紅柿發(fā)布于2019-05-23 15:55 / 2214人閱讀

摘要：過(guò)渡允許的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。需要明確知道，開(kāi)始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)。需要事件觸發(fā)，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

transition(過(guò)渡)

transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)效果改變CSS的屬性值

transition主要包含四個(gè)屬性值：

執(zhí)行變換的屬性：transition-property，

變換延續(xù)的時(shí)間：transition-duration，

在延續(xù)時(shí)間段，變換的速率變化：transition-timing-function，

變換延遲時(shí)間：transition-delay。

<div class="box">div>
<style>
    .box {
      width: 100px;
      height: 100px;
      background: cornsilk;
      margin: 200px auto;
      transition: all 2s ease-in-out;
    }
    .box:hover{
      width: 200px;
      height: 200px;
    }
  style>

這里需要注意一個(gè)transition加在.box和.box:hover上的區(qū)別

.box:直接上圖

.box {
  transition: all 2s ease-in-out;
}

.box:hover直接上圖(只在鼠標(biāo)放上時(shí)有效果,離開(kāi)時(shí)沒(méi)有效果)

.box:hover {
    transition: all 2s ease-in-out;
}

注意事項(xiàng)

不是所有的CSS屬性都支持transition。

transition需要明確知道，開(kāi)始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計(jì)算出中間狀態(tài)。比如，height從0px變化到100px，transition可以算出中間狀態(tài)。但是，transition沒(méi)法算出0px到auto的中間狀態(tài)，也就是說(shuō)，如果開(kāi)始或結(jié)束的設(shè)置是height: auto，那么就不會(huì)產(chǎn)生動(dòng)畫(huà)效果。

transition需要事件觸發(fā)，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。

transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

animation

值	描述
name	用來(lái)調(diào)用@keyframes定義好的動(dòng)畫(huà)，與@keyframes定義的動(dòng)畫(huà)名稱一致
duration	指定元素播放動(dòng)畫(huà)所持續(xù)的時(shí)間
timing-function	規(guī)定速度效果的速度曲線，是針對(duì)每一個(gè)小動(dòng)畫(huà)所在時(shí)間范圍的變換速率
delay	定義在瀏覽器開(kāi)始執(zhí)行動(dòng)畫(huà)之前等待的時(shí)間，值整個(gè)animation執(zhí)行之前等待的時(shí)間
iteration-count	定義動(dòng)畫(huà)的播放次數(shù)，可選具體次數(shù)或者無(wú)限(infinite)
direction	設(shè)置動(dòng)畫(huà)播放方向：normal(按時(shí)間軸順序),reverse(時(shí)間軸反方向運(yùn)行),alternate(輪流，即來(lái)回往復(fù)進(jìn)行),alternate-reverse(動(dòng)畫(huà)先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行)
play-state	控制元素動(dòng)畫(huà)的播放狀態(tài)，通過(guò)此來(lái)控制動(dòng)畫(huà)的暫停和繼續(xù)，兩個(gè)值：running(繼續(xù))，paused(暫停)
fill-mode	控制動(dòng)畫(huà)結(jié)束后，元素的樣式，有四個(gè)值：none(回到動(dòng)畫(huà)沒(méi)開(kāi)始時(shí)的狀態(tài))，forwards(動(dòng)畫(huà)結(jié)束后動(dòng)畫(huà)停留在結(jié)束狀態(tài))，backwords(動(dòng)畫(huà)回到第一幀的狀態(tài))，both(根據(jù)animation-direction輪流應(yīng)用forwards和backwards規(guī)則)，注意與iteration-count不要沖突(動(dòng)畫(huà)執(zhí)行無(wú)限次)

name 用來(lái)調(diào)用@keyframes定義好的動(dòng)畫(huà)，與@keyframes定義的動(dòng)畫(huà)名稱一致

transform

transform就是變形，主要包括旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix。

transform: translateZ(0); 來(lái)開(kāi)啟硬件加速

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/7085.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 713·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3785·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3852·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3869·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3558·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6105·2021-11-29 11:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

面試官: css3動(dòng)畫(huà)了解嗎? 我: .......

注意事項(xiàng)

相關(guān)文章