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

weakish 發布于2019-05-23 11:49 / 1194人閱讀

摘要：過渡允許的屬性值在一定的時間區間內平滑地過渡。需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。需要事件觸發，所以沒法在網頁加載時自動發生。是一次性的，不能重復發生，除非一再觸發。

transition(過渡)

transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值

transition主要包含四個屬性值：

執行變換的屬性：transition-property，

變換延續的時間：transition-duration，

在延續時間段，變換的速率變化：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上的區別

.box:直接上圖

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

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

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

注意事項

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

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

transition需要事件觸發，所以沒法在網頁加載時自動發生。

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

animation

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

name 用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致

transform

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6910.html

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

摘要：過渡允許的屬性值在一定的時間區間內平滑地過渡。需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。需要事件觸發，所以沒法在網頁加載時自動發生。是一次性的，不能重復發生，除非一再觸發。 transition(過渡) transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0
18年求職面經及總結

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

zhangwang 2019-08-22 11:07 評論0 收藏0
18年求職面經及總結

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

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

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

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