面試官: css3動畫了解嗎? 我: .......

weakish 發(fā)布于2019-05-23 11:49 / 1200人閱讀

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

transition(過渡)

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

transition主要包含四個屬性值：

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

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

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

變換延遲時間：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>

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

.box:直接上圖

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

.box:hover直接上圖(只在鼠標放上時有效果,離開時沒有效果)

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

注意事項

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

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

transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。

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

animation

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

name 用來調(diào)用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致

transform

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

transform: translateZ(0); 來開啟硬件加速

GPU云服務器云服務器 css3動畫高性能css3動畫面試官反問面試官

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/6910.html

面試官: css3動畫了解嗎? 我: .......

摘要：過渡允許的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計算出中間狀態(tài)。需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。是一次性的，不能重復發(fā)生，除非一再觸發(fā)。 transition(過渡) transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
18年求職面經(jīng)及總結(jié)

摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業(yè)學過兩門和相關的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

zhangwang 2019-08-22 11:07 評論0 收藏0
18年求職面經(jīng)及總結(jié)

摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業(yè)學過兩門和相關的課程語言和單片機這個專業(yè)的唯一好處就是大部分人并不知道這個專 18年求職面經(jīng)及總結(jié) 我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經(jīng)歷和面試總結(jié)寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

fjcgreat 2019-08-01 17:38 評論0 收藏0
前端面試總結(jié)（at, md）

摘要：面試官比較著急了，跟我溝通的時候，我才知道返回值不一定非要跟原生的一樣。騰訊一面平常開發(fā)怎么設計組件的。總結(jié)騰訊面試的感覺就是，沒有那么正式，都是部門的技術直接聯(lián)系的你，然后二面就是部門負責人了，決定了是否入職。引入面試過去了這么久，把八月份面試題和總結(jié)發(fā)一下吧，雖然年底大家可能都不換工作~ 還是可以看看的。關于面試，引用葉老濕的一句話。你的簡歷是自己工作的答卷，項目經(jīng)歷是你給面...

zhunjiee 2019-08-22 11:21 評論0 收藏0