🎄前言

小包上一篇文章講述如何實現隨機不規則圓角頭像時，其中一種方案通過妙用 animation-delay 負值和 paused 進行實現，這不由讓我對 animation-delay 負值產生巨大興趣，經過幾天的學習，我發現 animation-delay 負值的獨特特性帶來的威力真是非同小可。

學習本文章，你會學會:

• animation-delay 負值特性
• animation-delay 負值實現 bounce loading 效果
• animation-delay 負值實現 音浪 loading 效果

💫 誤區

為了更好的學會 animation-delay 負值效果，我翻看了好多大佬的博客，但我發現很多大佬對 animation-delay 設置的時間理解存在誤區。

問題是這樣的: 設置 animation-duration: 5s ，再設置 animation-delay: -1s ，那么請問當前動畫起始位置是正常執行的 1s 還是 4s 或者是別的時間點 ？

光說不練假把式，我們來實例檢驗一下，為了更直觀的觀察到結果，動畫采用 linear 勻速模式，并且使用 paused 暫停動畫，使動畫停留在初始位置。

• 創建 div ，初始寬高為 0 ，背景顏色 #000
• 添加 keyframe 動畫，100% 寬高擴展為 500px

@keyframes extend {0% {width: 0;height: 0;}100% {width: 500px;height: 500px;} }

• 設置 animation 和 animation-delay

animation: extend 5s linear paused; animation-delay: -1s; /* animation-delay: -2s; */

當設置 animation-delay 為 -1s 時，div 初始狀態為 100px*100px；設置為 -2s 時，div 初始狀態為 200px*200px

📜 animation-delay 負值總結

通過上面的實例，我們可以總結出 animation-delay 負值的特性:

animation-delay 設置負值的動畫會立即執行

負值設置多少，動畫跳過多少秒進入動畫周期。以上面案例為例子，設置 -1s 時，動畫就會從 1s 開始執行

那 animation-delay 會有何妙用那？

🏓 bounce loading

bounce loading 效果大致可以見下圖

當前 loading 效果，共有兩個動畫組成: 小球放大縮小動畫和整體旋轉的動畫。

小球放大縮小動畫為 scale(0) -> scale(1) -> scale(0)，兩小球的初始位置分別為 scale(0) scale(1)，兩球動畫同時啟動。

未學習 animation-delay 負值之前，為使兩球同時執行動畫，因此需要編寫兩個動畫。

.bubble-1 {animation: bounce 2s ease-in-out infinite; } .bubble-2 {animation: bounce2 2s ease-in-out infinite; } @keyframes bounce {0%,100% {transform: scale(0);}50% {transform: scale(1);} } @keyframes bounce2 {0%,100% {transform: scale(1);}50% {transform: scale(0);} }

我們從上面的代碼可以看出，bounce 和 bounce2 的代碼是高度重復的，只不過顛倒了起始位置，那這樣設立兩組動畫未免有幾分多余。

咱們來回想一下 animation-delay 負值的特點: 立即執行動畫；負值設置多少，動畫跳過多少秒進入動畫周期。

這不是恰好與上面的需求契合嗎？

.bubble-1, .bubble-2 {animation: bounce 2s ease-in-out infinite; } .bubble-2 {animation-delay: -1s; }

動畫執行時間為 2s ，設置 bubble-2 delay 值為 -1s ，那么 bubble-2 便從 1s 開始執行，這不就實現 bounce loading 效果了嗎？

🎶 音浪loading效果

上面只有兩個小球， delay 負值的強大之處沒有完全展現，下面來個狠的，音浪 loading 效果的初始狀態和動畫效果見下圖

音浪效果共有 15 個矩形組成，矩形的動畫效果是縱向放大與縮小，每個矩形的初始位置不同。

矩形太多了，每個矩形都寫一組動畫不現實。一方面寫起來太繁瑣，二是動畫的銜接性未必好。

大家有可能會想到另外一個方案，設置 animation-delay 正值來設置每個矩形的延遲時間，但正值沒有負值立即執行的特性，初始位置會存在問題。

接下來讓我們看看 animation-delay 負值的威力吧

/* load 動畫 */ @keyframes load {0% {background: #531430;transform: scaleY(0.08);}50% {background: #e04960;transform: scaleY(1);}100% {background: #531430;transform: scaleY(0.08);} } .loader span {/* 動畫持續時間為2.5s */animation: load 2.5s infinite linear; } /* 設置 animation-delay 負值 */ .loader span:nth-child(1), .loader span:nth-child(15){animation-delay: -1.1s; } .loader span:nth-child(2), .loader span:nth-child(14) {animation-delay: -1.3s; } .loader span:nth-child(3), .loader span:nth-child(13) {animation-delay: -1.5s; } .loader span:nth-child(4), .loader span:nth-child(12) {animation-delay: -1.7s; } .loader span:nth-child(5), .loader span:nth-child(11) {animation-delay: -1.9s; } .loader span:nth-child(6), .loader span:nth-child(10) {animation-delay: -2.1s; } .loader span:nth-child(7), .loader span:nth-child(9) {animation-delay: -2.3s; } .loader span:nth-child(8) {animation-delay: 0s; }

不知道大家體會到 animation-delay 負值的強大之處嗎？

🛕 源碼倉庫

傳送門: animation-delay 負值實現 loading 效果

如果感覺有幫助的話，別忘了給小包點個 ? 。

💥 后語

伙伴們，如果大家感覺本文對你有一些幫助，給阿包點一個贊👍或者關注?都是對我最大的支持。

另外如果本文章有問題，或者對文章其中一部分不理解，都可以評論區回復我，我們來一起討論，共同學習，一起進步！

總結

以上是生活随笔為你收集整理的animation-delay负值妙用，你不来了解一下吗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。