一、什麼是CSS animation shake效果
CSS animation shake效果是CSS3動畫效果的一種，通過代碼實現元素的抖動和擺動效果，為網頁增添了動感和活力。
實現這種效果需要藉助CSS3中的animation屬性和關鍵幀（@keyframes）規則，使用相應的屬性值設置元素的形態變化。其中animation屬性有多個子屬性，如animation-timing-function、animation-delay、animation-iteration-count等，可以實現不同的效果。
二、如何實現CSS animation shake效果
在CSS中使用CSS animation shake效果可以通過以下步驟實現：
1、定義一個需要應用CSS animation shake效果的元素，如下所示：
<div class="animated-element"></div>
2、在CSS樣式中，為這個元素添加animation屬性，並設置animation-name、animation-duration等屬性，如下所示：
.animated-element {
animation-name: shake;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
其中animation-name屬性指定了元素要使用的動畫名稱，這裡是shake；animation-duration屬性指定了動畫持續時間，這裡是1秒；animation-delay屬性指定了動畫延遲時間，這裡是0秒；animation-iteration-count屬性指定了動畫要執行的次數，這裡是無限循環；animation-timing-function屬性指定了動畫的時間函數，這裡是緩入緩出。
3、在樣式中定義shake動畫的關鍵幀，即元素的形態變化過程，如下所示：
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-8px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(8px);
}
100% {
transform: translateX(0);
}
}
其中@keyframes關鍵幀規則用於定義動畫的關鍵幀，包括動畫開始和結束時元素的形態。每個關鍵幀使用百分比表示動畫執行的時間節點，0%表示動畫開始時元素的形態，100%表示動畫結束時元素的形態。在這個樣式中，每個關鍵幀定義了元素在執行過程中的形態變化，通過在transform屬性中設置translateX屬性值來實現元素的橫向平移。
三、如何調整CSS animation shake效果
通過調整CSS animation shake效果的不同屬性值，可以實現不同的動畫效果。下面是一些常見的調整方法：
1、調整animation-duration屬性值，可以改變動畫執行時間的長短。
2、調整animation-delay屬性值，可以改變動畫執行前的延遲時間。
3、調整animation-iteration-count屬性值，可以改變動畫執行的次數。
4、調整animation-timing-function屬性值，可以改變動畫的時間函數，如ease-in、ease-out、ease-in-out、linear等。
5、在@keyframes關鍵幀規則中調整關鍵幀的百分比值和transform屬性值，可以改變元素的形態變化。
四、完整CSS animation shake效果示例代碼
<!DOCTYPE html>
<html>
<head>
<title>CSS animation shake效果示例代碼</title>
<style>
.animated-element {
width: 100px;
height: 100px;
background-color: #FF69B4;
animation-name: shake;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-8px);
}
50% {
transform: translateX(0);
}
75% {
transform: translateX(8px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="animated-element"></div>
</body>
</html>
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/248612.html
微信掃一掃 
支付寶掃一掃 