基于当前位置的变换动画(四)
前言
CSS元素动画一般分为两种:一种是元素基于当前位置的变换动画,通过不明显的位移、缩放等方式,实现动画效果,如弹跳、闪烁、抖动等;另一种是元素基于页面位置的变换动画,通过位移、旋转等方式,实现动画效果,如飞入/飞出等。
基于当前位置的变换动画,我又将根据动画实现效果将其分为4类:
- 位移效果类:通过不明显的位移,实现元素动画效果,如:水平抖动、垂直抖动等。
- 旋转效果类:通过小幅度旋转,实现元素动画效果,如元素摇摆、摇晃等。
- 缩放效果类:通过缩放,实现元素动画效果,如脉冲效果、呼吸效果、心跳效果等。
- 透明度效果类:通过改变元素透明度,实现元素动画效果,如闪烁效果。
本文主要介绍透明度效果类的相关元素动画效果与代码实现。
透明效果类元素动画
闪烁动画效果
闪烁动画效果:通过控制元素周期性的显示和隐藏,模拟闪烁的效果,其效果图如下所示:
效果预览

代码实现
html
<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>
淡入动画效果
淡入动画效果:元素由完全透明(不可见)变成完全不透明(可见)的过程,其效果图如下所示:
效果预览

代码实现
html
<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>
淡出动画效果
淡出动画效果:元素由完全不透明(可见)变成完全透明(不可见)的过程,其效果图如下所示:
效果预览

代码实现
html
<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>
结语
本文主要介绍了几种常见的透明效果类元素动画,你还知道哪些透明效果类元素动画?欢迎在评论区留言分享!