您好，我是“web秀-提供專業的web前端技術知識”。

我想您要的是這樣的效果

這個效果，主要是通過transition事件動畫，當然也可以用animation動畫

下面我們看看transition、animation怎么區分？

transition需要觸發一個事件， 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網頁特效用的。

ok，明白了吧

我們用animation實現上面效果看看

animation語法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

屬性值描述

• animation-name 規定 @keyframes 動畫的名稱。
• animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
• animation-timing-function 規定動畫的速度曲線。默認是 "ease"。linear 動畫從頭到尾的速度是相同的。ease 默認。動畫以低速開始，然后加快，在結束前變慢。ease-in 動畫以低速開始。ease-out 動畫以低速結束。ease-in-out 動畫以低速開始和結束。cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
• animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。forwards 在動畫結束后（由 animation-iteration-count 決定），動畫將應用該屬性值。backwards 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。
• animation-delay 規定動畫何時開始(延時多少s后執行)。默認是 0。
• animation-iteration-count 規定動畫被播放的次數。默認是 1。
• animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。reverse 動畫反向播放。alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。alternate-reverse 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。
• animation-play-state 規定動畫是否正在運行或暫停(通常控制動畫是否運行或暫停)。默認是 "running"。paused 指定暫停動畫running 指定正在運行的動畫

注意

animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

喜歡我的點擊關注哦，為大家提供專業的web前端知識，但不止于前端哦