基于當前位置的變換動畫（三）
- 前言
- 縮放效果類元素動畫
- 脈沖動畫效果
- 效果預覽
- 代碼實現
- 橡皮筋動畫效果
- 效果預覽
- 代碼實現
- 果凍動畫效果
- 效果預覽
- 代碼實現
- 歡呼動畫效果
- 效果預覽
- 代碼實現
- 心跳動畫效果
- 效果預覽
- 代碼實現
- 結語
前言
CSS元素動畫一般分為兩種：一種是元素基于當前位置的變換動畫，通過不明顯的位移、縮放等方式，實現動畫效果，如彈跳、閃爍、抖動等；另一種是元素基于頁面位置的變換動畫，通過位移、旋轉等方式，實現動畫效果，如飛入/飛出等。
基于當前位置的變換動畫，我又將根據動畫實現效果將其分為4類：
- 位移效果類：通過不明顯的位移，實現元素動畫效果，如：水平抖動、垂直抖動等。
- 旋轉效果類：通過小幅度旋轉，實現元素動畫效果，如元素搖擺、搖晃等。
- 縮放效果類：通過縮放，實現元素動畫效果，如脈沖效果、呼吸效果、心跳效果等。
- 透明度效果類：通過改變元素透明度，實現元素動畫效果，如閃爍效果。
本文主要介紹縮放效果類的相關元素動畫效果與代碼實現。
縮放效果類元素動畫
脈沖動畫效果
脈沖動畫效果：通過元素放大和縮小的效果，從而產生脈沖的感覺，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 脈沖動畫 */
@keyframes pulse {0%, 100% {transform: scale(1);}50% {transform: scale(1.1);}
}
.pulse {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.pulse:hover {animation: pulse 1s linear 1;
}
</style><body><span class="pulse">脈沖動畫</span>
</body>
橡皮筋動畫效果
橡皮筋動畫：通過元素伸張和縮小，讓元素看起來像被拉長后迅速恢復原狀，從而產生橡皮筋拉伸回彈的感覺，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 橡皮筋效果 */
@keyframes rubberBand {0%, 100% {transform: scale(1, 1);}30% {transform: scale(1.25, 0.75);}40% {transform: scale(0.75, 1.25);}50% {transform: scale(1.15, 0.85);}65% {transform: scale(0.95, 1.05);}75% {transform: scale(1.05, 0.95);}
}
.rubber-band {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.rubber-band:hover {animation: rubberBand 1s 1;
}
</style><body><span class="rubber-band">橡皮筋動畫</span>
</body>
果凍動畫效果
果凍動畫效果：果凍效果和橡皮筋效果類似，只是在橡皮筋的動畫基礎上增加了輕微旋轉，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 果凍效果 */
@keyframes jello {0%, 100% {transform: skewX(0deg) skewY(0deg);}15% {transform: skewX(-25deg) skewY(-25deg);}30% {transform: skewX(20deg) skewY(20deg);}45% {transform: skewX(-15deg) skewY(-15deg);}60% {transform: skewX(10deg) skewY(10deg);}75% {transform: skewX(-5deg) skewY(-5deg);}
}
.jello {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.jello:hover {animation: jello 1s 1;
}
</style><body><span class="jello">果凍動畫</span>
</body>
歡呼動畫效果
歡呼動畫效果：通過元素放大和輕微抖動，實現簡單的歡呼效果，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 歡呼動畫 */@keyframes tada {0%, 100% {transform: scale(1) rotate(0deg);}10%, 20% {transform: scale(0.9) rotate(-3deg);}30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
}
.tada {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.tada:hover {animation: tada 1s 1;
}
</style><body><span class="tada">歡呼動畫</span>
</body>
心跳動畫效果
心跳動畫效果：心跳動畫效果和脈沖類似，只是動畫細節比脈沖更賦值，動畫幀更多，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 心跳動畫 */
@keyframes heartBeat {0%, 100% {transform: scale(1);}25%, 75% {transform: scale(1.1);}50% {transform: scale(0.9);}
}
.heart-beat {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.heart-beat:hover {animation: heartBeat 1s 1;
}
</style><body><span class="heart-beat">心跳動畫</span>
</body>
結語
本文主要介紹了幾種常見的縮放效果類元素動畫，你還知道哪些縮放效果類元素動畫？歡迎在評論區留言分享！
壓縮上傳組件-能夠增刪改查)
