基于當前位置的變換動畫（四）
- 前言
- 透明效果類元素動畫
- 閃爍動畫效果
- 效果預覽
- 代碼實現
- 淡入動畫效果
- 效果預覽
- 代碼實現
- 淡出動畫效果
- 效果預覽
- 代碼實現
- 結語
前言
CSS元素動畫一般分為兩種：一種是元素基于當前位置的變換動畫，通過不明顯的位移、縮放等方式，實現動畫效果，如彈跳、閃爍、抖動等；另一種是元素基于頁面位置的變換動畫，通過位移、旋轉等方式，實現動畫效果，如飛入/飛出等。
基于當前位置的變換動畫，我又將根據動畫實現效果將其分為4類：
- 位移效果類：通過不明顯的位移，實現元素動畫效果，如：水平抖動、垂直抖動等。
- 旋轉效果類：通過小幅度旋轉，實現元素動畫效果，如元素搖擺、搖晃等。
- 縮放效果類：通過縮放，實現元素動畫效果，如脈沖效果、呼吸效果、心跳效果等。
- 透明度效果類：通過改變元素透明度，實現元素動畫效果，如閃爍效果。
本文主要介紹透明度效果類的相關元素動畫效果與代碼實現。
透明效果類元素動畫
閃爍動畫效果
閃爍動畫效果：通過控制元素周期性的顯示和隱藏，模擬閃爍的效果，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 閃爍動畫 */
@keyframes blink {0%, 100% {opacity: 1;}50% {opacity: 0;}
}
.blink {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.blink:hover {animation: blink 1s 1;
}
</style><body><span class="blink">閃爍動畫</span>
</body>
淡入動畫效果
淡入動畫效果：元素由完全透明（不可見）變成完全不透明（可見）的過程，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 淡入動畫 */
@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}
.fade-in {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.fade-in:hover {animation: fadeIn 2s ease-in-out;
}
</style><body><span class="fade-in">淡入動畫</span>
</body>
淡出動畫效果
淡出動畫效果：元素由完全不透明（可見）變成完全透明（不可見）的過程，其效果圖如下所示：
效果預覽
代碼實現
<style>
/* 淡出動畫 */
@keyframes fadeOut {from {opacity: 0;}to {opacity: 1;}
}
.fade-out {display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.fade-out:hover {animation: fadeOut 2s ease-in-out;
}
</style><body><span class="fade-out">淡出動畫</span>
</body>
結語
本文主要介紹了幾種常見的透明效果類元素動畫，你還知道哪些透明效果類元素動畫？歡迎在評論區留言分享！
![[密碼學實戰]商用密碼產品密鑰體系架構：從服務器密碼機到動態口令系統](http://pic.xiahunao.cn/[密碼學實戰]商用密碼產品密鑰體系架構：從服務器密碼機到動態口令系統)
——4.28)
在圖像分類中的應用)
