如何在 CSS 中定义动画的持续时间？ |
您所在的位置：网站首页 › css定义动画循环播放 › 如何在 CSS 中定义动画的持续时间？ |
如何在 CSS 中定义动画的持续时间？
|
在设计网站时，通常使用 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 #mainh1{ animation-name: change; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes change { from { color: green; } to { color: red; } } 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 #mainh1{ animation-name: change; animation-duration: 5s; animation-iteration-count: infinite; } @keyframes change { from { color: green; } to { color: red; } } GeeksforGeeks输出：
|
【本文地址】
今日新闻 |
推荐新闻 |