CSS3特效系列（一）向上淡入-我就是菜

00.引言

随着Web技术的发展，CSS3为我们提供了丰富的动画效果，使得网页设计变得更加生动有趣。在本系列文章中，我们将探索CSS3的各种特效，从简单的淡入淡出到复杂的3D转换，一一为您揭晓。今天，我们将从最基本的动画效果之一——向上淡入（fade-in-up）开始。

01.如何实现向上淡入动画？

实现向上淡入动画非常简单，只需要使用CSS3的@keyframes规则和animation属性。下面，我将通过一段示例代码，展示如何创建这种效果。

（1）定义关键帧

首先，我们需要定义动画的关键帧。关键帧指定了动画的开始和结束状态。在我们的示例中，动画从元素完全不可见（opacity: 0）且位于屏幕下方（transform: translateY(100px)）开始，到元素完全可见（opacity: 1）且位于正常位置（transform: translateY(0)）结束。

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

（2）应用动画

接下来，我们需要将动画应用到特定的元素上。为此，我们创建了一个类.fade-in-up-style，用于设置元素的背景颜色，以及.fade-in-up-animation，用于指定动画的名称、持续时间和填充模式。

.fade-in-up-style {
  background-color: lightblue;
}

.fade-in-up-animation {
  animation-name: fade-in-up;
  animation-duration: 1s;
  animation-fill-mode: both;
}

（3）将样式应用到HTML元素

最后，我们将这些样式应用到HTML元素上。例如：

  <div class="fade-in-up-style fade-in-up-animation">
      This is an upward fade animation.
  </div>

03.完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS3特效系列（一）向上淡入</title>
    <style>
      @keyframes fade-in-up {
        0% {
          opacity: 0;
          transform: translateY(100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-in-up-style {
        background-color: lightblue;
      }

      .fade-in-up-animation {
        animation-name: fade-in-up;
        animation-duration: 1s;
        animation-fill-mode: both;
      }
    </style>
  </head>
  <body>
    <div class="fade-in-up-style fade-in-up-animation">
      This is an upward fade animation.
    </div>
  </body>
</html>

目录CONTENT

CSS3特效系列（一）向上淡入