CSS动画

配置动画

1. animation属性：使用animation属性或其子属性来配置动画。这允许您设置动画的时间、持续时间以及其他细节。但是，实际的动画表现是由@keyframes规则定义的。以下是一些常用的子属性：

   • animation-delay：设置动画开始执行之前的延迟时间。
   • animation-direction：指定动画在每次运行后是反向运行还是重新回到开始位置重复运行。
   • animation-duration：设置动画一个周期的时长。
   • animation-iteration-count：设置动画重复次数，可以指定为infinite无限次重复。
   • animation-name：指定由@keyframes描述的关键帧名称。
   • animation-timing-function：设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化的。
   • animation-fill-mode：指定动画执行前后如何为目标元素应用样式。

2. 使用@keyframes定义动画序列：一旦设置了动画的时间，接下来需要定义动画的表现。通过使用@keyframes规则，您可以建立两个或两个以上的关键帧，描述动画元素在给定的时间点上应该如何渲染。关键帧使用百分比来指定动画发生的时间点，例如，0%表示动画的第一时刻，100%表示动画的最终时刻。您还可以使用别名from和to，分别表示0%和100%。

示例

让我们看一个简单的示例，将一个段落元素从浏览器窗口的右侧滑动到左侧：

CSS

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes 是 CSS 中用于定义动画序列的关键规则。让我们深入了解一下这个有趣的特性。

什么是 @keyframes？

• @keyframes 允许您在动画中定义一系列关键帧，描述元素在不同时间点上的样式。
• 您可以在关键帧中指定元素的属性，从而使其逐渐从一种样式过渡到另一种样式。

如何使用 @keyframes？

1. 定义动画名称：首先，您需要为动画定义一个名称，以便在其他地方引用它。例如：

   CSS

   @keyframes slidein {
     /* 关键帧定义 */
   }
   

2. 设置关键帧：在 @keyframes 规则内，您可以使用百分比或别名 from 和 to 来指定动画发生的时间点。例如：

   CSS

   @keyframes slidein {
     from {
       /* 元素样式在动画开始时 */
     }
     to {
       /* 元素样式在动画结束时 */
     }
   }
   

   AI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.

3. 添加更多关键帧：除了 from 和 to，您还可以添加其他百分比关键帧，以定义更复杂的动画效果。例如：

   CSS

   @keyframes slidein {
     0% {
       /* 元素样式在动画开始时 */
     }
     50% {
       /* 元素样式在动画中间某个时间点 */
     }
     100% {
       /* 元素样式在动画结束时 */
     }
   }
   

   AI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.

示例

让我们继续使用之前的例子，创建一个从右侧滑动到左侧的动画：

CSS

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

在这个示例中，<p> 元素将从右侧滑动到左侧，动画持续 3 秒。