CSS 如何定义动画的完成时长

创建网站的工艺常常需要对细节进行仔细的审查和对设计要素的敏锐理解。提升用户与网站互动体验的一个基本组成部分是动画效果。然而，动画的效果很大程度上取决于它完成所需的时间。实际上，动画的时间管理是打造视觉吸引人和引人入胜的在线冒险的一个关键要素。因此，在这篇文章中，我们将探讨使用CSS来指定动画时长的复杂性，这是一个可以提升网站动画品质的关键技能。

animation-duration属性

CSS属性animation-duration用于确定动画完成一个循环所需的时间长度。它以秒（s）或毫秒（ms）来指定动画的时间跨度。默认设置的animation-duration属性值为0s，表示动画立即发生且没有持续时间。当animation-duration属性被赋予一个值时，动画将持续指定的时长，然后根据animation-iteration-count属性停止或重新开始。

语法

animation-duration: <time>;

在这个上下文中，<time> 表示动画的时间跨度，以秒（s）或毫秒（ms）表示。数量可以是分数或整数。

方法

要在CSS中定义动画的持续时间，请按照以下步骤进行：

使用 @keyframes 规则定义动画。该规则指定了动画的起始和结束点。
使用 animation-name 属性将动画应用到一个元素上。该属性将动画与元素关联起来。
通过使用 animation-duration 属性指示动画的持续时间。该属性确定动画完成其序列所需的时间量。
可选地，使用 animation-iteration-count 属性设置动画应重复播放的次数。该属性控制动画在停止之前应播放的次数。

示例

以下HTML代码段描述了CSS中动画的时间跨度。首先，@keyframes规则解释了一个将实体的背景颜色从红色变为黄色的动画。动画的起始和结束点由@keyframes规则中的from和to表达式确定。在这里，动画从红色背景开始，以黄色背景结束。然后，div组件被装饰上CSS属性。width和height属性设置了div实体的大小，background-color属性指定了起始背景颜色为红色。animation-name属性将@keyframes规则中定义的动画与div实体关联起来。animation-duration属性确定了动画的持续时间，单位为秒。在这个示例中，动画将持续两秒钟。最后，animation-iteration-count属性被设置为无限值，以生成一个不间断的动画循环，直到用户与网页进行交互。

<!DOCTYPE html>
<html>
   <head>
      <title>How to define the duration of an animation takes to complete in CSS?</title>
      <style>
         @keyframes example {
            from {
               background-color: red;
            }
            to {
               background-color: yellow;
            }
         }
         div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: example;
            animation-duration: 2s;
            animation-iteration-count: infinite;
         }
      </style>
   </head>
   <body>
      <h4>How to define the duration of an animation takes to complete in CSS?</h4>
      <div></div>
   </body>
</html>