CSS元素动画篇：基于当前位置的变换动画（四）

基于当前位置的变换动画（四）

• 前言
• 透明效果类元素动画
• • 闪烁动画效果
  • • 效果预览
    • 代码实现
  • 淡入动画效果
  • • 效果预览
    • 代码实现
  • 淡出动画效果
  • • 效果预览
    • 代码实现
• 结语

前言

CSS元素动画一般分为两种：一种是元素基于当前位置的变换动画，通过不明显的位移、缩放等方式，实现动画效果，如弹跳、闪烁、抖动等；另一种是元素基于页面位置的变换动画，通过位移、旋转等方式，实现动画效果，如飞入/飞出等。

基于当前位置的变换动画，我又将根据动画实现效果将其分为4类：

1. 位移效果类：通过不明显的位移，实现元素动画效果，如：水平抖动、垂直抖动等。
2. 旋转效果类：通过小幅度旋转，实现元素动画效果，如元素摇摆、摇晃等。
3. 缩放效果类：通过缩放，实现元素动画效果，如脉冲效果、呼吸效果、心跳效果等。
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>

结语

本文主要介绍了几种常见的透明效果类元素动画，你还知道哪些透明效果类元素动画？欢迎在评论区留言分享！