在设计网站时，通常使用 JavaScript 来定义网页的行为。但是有一些方法可以帮助我们使用 CSS 为页面定义某些行为。一种这样的行为是动画。 CSS 动画是帮助我们在不使用 JavaScript 的情况下更改网页行为和外观的方法。它们定义不同时间间隔的元素外观，从而显示动画。
定义动画的持续时间：要使用 CSS 动画，我们需要定义 CSS 显示不同外观的时间间隔。为此，我们有animation-duration属性，它设置动画完成一个循环所需的时间间隔。
句法：
animation-duration: (time in seconds);下面是说明动画持续时间使用的示例。
示例：我们现在将创建一个颜色变化动画。让我们首先创建我们的 HTML 文件，该文件将包含我们要为其应用动画的文本。
index.html
Animation example
GeeksforGeeks
style.css
#mainh1{
animation-name: change;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes change {
from {
color: green;
}
to {
color: red;
}
}HTML
GeeksforGeeks
现在我们的 HTML 文件已经准备好了，我们可以在 CSS 文件中定义我们的样式和动画。在这个例子中，我们将使用animation-duration属性，它会在 5 秒内改变我们标题的颜色。
CSS 代码：请注意，我们在这里创建了一个名为“change”的自定义动画。要了解如何创建 CSS 动画，请参阅本文。
这里要注意的主要事情是我们将动画的持续时间定义为 5 秒。这意味着标题的文本颜色应在 5 秒内从绿色变为红色。
样式文件
#mainh1{
animation-name: change;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes change {
from {
color: green;
}
to {
color: red;
}
}
完整代码：
HTML
GeeksforGeeks
输出：
