掌握CSS基本动画概念

CSS动画：赋予网站活力与动感的魔法

CSS动画如同魔术般，让网站更具活力和吸引力。通过动画，您可以轻松移动网站元素、更改其颜色并平滑调整其大小。

为了使您的动画更具互动性和流畅性，您首先需要了解基本的动画概念。在本篇文章中，您将学习动画的基本规则语法和动画属性，以控制动画的行为。

让我们开始吧！?

要开始使用CSS动画，您需要了解两个基本组件：

• @keyframes: 动画的蓝图。
• 动画属性: 控制动画的设置。

@keyframes

@keyframes是动画的路线图，您可以在其中定义动画的起点和终点以及动画之间的步骤。

这意味着，这部分定义了动画如何开始，如何在中间运行以及动画如何结束。

语法:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

例如:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

在此示例中，元素的不透明度将从0开始，然后变为1。

在继续之前，请查看这份电子书，它将使您成为CSS动画专家：

? CSS动画精要：最佳实践、技巧和性能提示

从简单的淡入淡出到复杂的动画，这份电子书涵盖了掌握CSS动画所需的一切，包括：

• 定时函数
• 关键帧和动画流程
• 性能优化
• 真实世界的应用

非常适合希望创建流畅CSS动画的开发者。立即获取您的副本！

动画属性

为了自定义CSS动画，使用了不同的属性，每个属性都有其自身的作用，定义了动画的行为。

动画属性直接应用于元素，定义动画的名称、持续时间、延迟、方向等。

语法:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

例如:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

在此示例中，类名为“box”的元素最初将不可见，两秒钟后将可见，从而产生平滑的淡入效果。

在CSS中，您有以下动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

现在，让我们了解每个属性。

animation-name

作用：

此属性用于定义应应用哪个@keyframes动画。

例如，如果您有两个名为fadeIn或fadeOut的@keyframes，则可以使用animation-name属性定义应在哪个元素上应用fadeIn动画以及在哪个元素上应用fadeOut动画。

语法:

<code>animation-name: animationName;</code>

例如:

<code>animation-name: fadeIn;</code>

animation-name属性是运行动画所必需的。

animation-duration

作用：

此属性定义动画的持续时间，即动画运行需要多长时间。

您可以以秒(s)或毫秒(ms)为单位定义动画持续时间。

语法:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

例如:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

如果您不定义animation-duration，则它将自动设置为0s（默认值），这将使动画实际上失效。

animation-timing-function

作用：

此属性用于定义动画的速度模式。这意味着，您可以使用此属性定义动画是缓慢开始、以恒定速度运行还是快速运行。

它具有以下值：

• linear：动画将以恒定速度运行。
• ease：缓慢开始，中间快速，缓慢结束。
• ease-in：缓慢开始。
• ease-out：缓慢结束。
• ease-in-out：缓慢开始和缓慢结束。
• cubic-bezier(x1, y1, x2, y2)：自定义速度模式。

示例：

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

animation-delay

作用：

此属性定义动画在开始之前将等待多长时间，即动画的延迟。

语法:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

示例:

<code>animation-name: animationName;</code>

animation-iteration-count

作用：

此属性用于定义动画的重复次数，即动画将重复多少次。

它具有以下值：

• 1：动画将只运行一次（这是默认值）。
• infinite：动画将不断重复。
• 任何数字：动画将运行您定义的次数。

示例:

<code>animation-name: fadeIn;</code>

animation-direction

作用：

此属性定义动画的方向。

它具有以下值：

• normal：动画将向前运行（这是默认值）。
• reverse：动画将反向运行。
• alternate：动画将交替运行，一次向前，一次向后。
• alternate-reverse：动画将首先反向运行，然后向前运行。

示例：

<code>animation-duration: time;</code>

animation-fill-mode

作用：

此属性用于定义动画开始之前和结束之后的元素样式。它定义了在动画未播放时应将哪些样式应用于元素。

它允许您控制动画之前和之后元素的外观，使您在动画过程中管理元素状态时更灵活。

它具有以下值：

• none：动画前后不应用任何样式。
• forwards：保留动画的结束样式。
• backwards：这也会在延迟时间内应用动画的起始样式。
• both：处理开始和结束的样式。

示例：

<code>animation-duration: 4s; /* 动画将运行4秒 */</code>

animation-play-state

作用：

此属性指定动画的状态：运行或暂停。

它具有以下值：

• running：动画将继续。
• paused：动画将停止，但将保留状态。

示例：

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

此属性用于交互式动画，例如，在悬停时暂停动画。

动画简写语法

动画简写允许您在一行中定义多个动画属性。您可以将它们组合成一行以提高可读性，而不是逐个编写每个动画属性。

语法:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

示例:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

这里，

• slide：动画的名称。
• 3s：动画持续时间为3秒。
• ease-in-out：定时函数为ease-in-out，这意味着动画将缓慢开始，加速，然后再次减速。
• 1s：动画将在1秒延迟后开始。
• infinite：动画将无限重复。
• alternate：动画将在每次迭代中在向前和向后移动之间交替。
• forwards：动画完成后，将在最后一个关键帧（在100%处）应用的样式将被保留。

动画速查表

我创建了一个全面的CSS动画速查表，其中涵盖了CSS动画中使用的所有关键概念、属性和语法。

您可以通过单击下面的链接在GitHub上下载速查表：

https://www.php.cn/link/02f5df8adf0db026d38425594e68a007

就是这样。

我希望它对您有所帮助。

感谢您的阅读。

如果您觉得我的文章有帮助，并想支持我的工作，请考虑请我喝杯咖啡☕。

更多此类内容，请点击此处。

在X(Twitter)上关注我，获取每日Web开发技巧。

继续编码！！

以上是掌握CSS基本动画概念的详细内容。更多信息请关注PHP中文网其他相关文章！