關於animation和transition一點知識

vipbic發表於2020-02-13

在使用CSS3動畫時相信很多人都會接觸過animation，transition以及transform屬性。通過 CSS3，我們能夠建立動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript——CSS3是世界上最可愛的語言

CSS3動畫和JS動畫的區別

JS 實現的是幀動畫 CSS3 實現的是補間動畫

幀動畫：使用定時器，每隔一段時間，更改當前的元素 補間動畫： 過渡（加過渡只要狀態發生改變產生動畫）動畫(多個節點來控制動畫)效能會更好

transition

transition是一個簡單的動畫屬性，可以看作是是animation的簡化版本，通常拿來配合事件觸發使用，簡單易用

transition的屬性值

描述 屬性
transition-property 需要過渡的屬性，也可以是all，不能用block，none等
transition-duration 指定從一個屬性到另一個屬性過渡所要花費的時間。預設值為0，為0時，表示變化是瞬時的，看不到過渡效果
transiton-timing-function 就是過渡的動畫型別。可用的型別有liner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定製
transition-delay 指定檢測到過渡行為之後延遲一定時間後才開始進行執行

transition特性

  • transition需用事件觸發【比如加個hover偽類】，不能在網頁載入時自動發生
  • 一次性，不能重複發生，除非一再觸發
  • 只有兩個狀態：開始和結束狀態
  • 一條transition規則只能定義一個屬性
<body>
    <div class="box"></div>
</body>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        transition: width 1s 0.5s ease-in-out;
    }

    .box:hover {
        width: 200px;
    }
</style>
複製程式碼

效果如下

1570238141_b486cb2fe2eaa5d.gif

也可以在 hover 中寫 transition: width 1s 0.5s ease-in-out

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}
複製程式碼

333332507bb33.gif

其實寫在hover上也是可以的，但是當我移出元素後，元素寬度立馬恢復，而沒有過渡！ 原因很簡單，你transistion只寫在hover上，也就是說只有滑鼠移上去的時候，該偽類才生效

animation

animation的屬性值

屬性 描述
animation-name 用來呼叫@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0
animation-timing-function 速度曲線，和transition-timing-function一樣，可用的型別有liner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，可以定製
animation-delay 規定動畫何時開始，預設是 0
animation-iteration-count 規定動畫被播放的次數。預設是 1
animation-direction normal 預設值，如果設定為normal時，動畫每次迴圈都是向前（即按順序）播放，alternate（輪流），動畫播放在第偶數次向前播放，第奇數次向反方向播放（animation-iteration-count取值大於1時設定有效）
animation-play-state running，可以通過該值將暫停的動畫重新播放，這裡的重新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放，paused，暫停播放
animation-fill-mode 預設情況下，動畫結束後，元素的樣式將回到起始狀態，animation-fill-mode屬性可以控制動畫結束後元素的樣式。主要具有四個屬性值：none（預設，回到動畫沒開始時的狀態。），forwards（動畫結束後動畫停留在結束狀態），backwords（動畫回到第一幀的狀態），both（根據animation-direction輪流應用forwards和backwards規則） 
<body>
    <div class="box"></div>
</body>
<style>
.box {
    height: 200px;
    width: 200px;
    animation: 3s type forwards alternate infinite;
    animation-play-state: running;
}

.box:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background: yellowgreen
    }

    50% {
        background: yellow
    }

    to {
        background: aquamarine
    }
}
</style>
複製程式碼

當滑鼠移入的時候暫停，移出的時候繼續變換顏色

4444444.gif

transform

首先要注意的是transform屬性是靜態屬性，只要寫進style裡就會直接顯示生效，不會出現動畫過程 通過使用transform屬性，能夠對元素進行移動（translate）、縮放（scale）、旋轉（rotate）、翻轉（skew），更多詳細引數可以參考CSS3 transform 屬性

總結

區別 transition animation
是否能自動執行 不能，需要事件觸發，比如hover 能
能否重複發生 不能，除非在一次觸發 能
能否包含多個狀態 不能，只有開始和結束狀態 能，比如從0% 到100%，任意指定過渡狀態
能否暫停 不能，一次性 能，比如hover事件觸發暫停
能否定義速度曲線 能 能
能否定義某個屬性值過渡 能 能

參考文章

CSS動畫 animation與transition
CSS動畫中的transition和animation

關於我

關於animation和transition一點知識

相關文章