如何制作 CSS 动画？

动画是一种通过以典型格式一个接一个地放置静止图像来创建运动错觉的方法。例如，我们可以让一个球在某个瞬间上升而不是作为动画效果下降。 CSS 为我们提供了一些属性来通过更改其一些变量(如时间和关键帧等)来控制动画效果。

一些 CSS 属性如下：

• animation-name：指定要使用的动画名称。
• animation-iteration-count：它表示动画应该生效的周期数。
• animation-direction：指定动画播放的方向。
• 动画延迟：动画应该开始的时间段。
• 动画持续时间：提及动画持续的持续时间。

除了所有这些方法外，还有一些其他方法，例如： animation-timing-function、@keyframes、animation-fill-mode等。

说明：基本上在我们的 CSS 代码中，首先我们必须使用“@keyframes”属性指定我们的动画应该显示的主要效果。然后在这个块中，我们必须编写动画的效果，即大小的变化，必须发生从哪种颜色到哪种颜色的变化，不透明度的变化等等。这些都可以用总时间段的百分比或使用“from”和“to”关键字来提及。因此，该块包含要显示的主要动画代码。

以下是创建动画的示例。第一个动画导致不透明度的变化，第二个动画导致背景颜色的变化。

• 示例 1：

  CSS

  @keyframes animation_example1{
    /* animation results in change of opacity*/
    from{opacity:0.3;}
    to{opacity:1;}
  }

• 示例 2：在此代码中，我们创建了动画，但要将这些动画的效果链接到 HTML 标签(可能是 img 或其他标签)，我们必须在该标签的 CSS 样式中指定它们的名称。

  CSS

  @keyframes animation_example2{
    /* here the amount of total time is divided */
    0%{height:220px;
      width:220px;
      opacity:0.7;}
    50%{height:240px;
      width:240px;
      opacity:0.4;}
  }
  

• 示例 3：在此代码中，我们可以提及动画的细节，例如计时和延迟时间以及迭代次数等

  CSS

  #pic1{
  animation-name:animation_example2;
    animation-duration:2s;
    animation-delay:0.5s;
    animation-iteration-count:infinite;
  }/* This animation will continue 
      infinite number of times */
  

以下是将应用上述 CSS 以生成结果的完整 HTML 代码。

HTML

输出：

输出