The craft of website creation frequently necessitates scrupulous scrutiny of particulars and a perceptive comprehension of elegance. A fundamental component that can enhance the user's encounter with a website is animation. Nevertheless, the potency of an animation is largely hinged upon the time it takes to culminate. Truly, the chronometric facet of an animation is a critical variable in crafting a visually enthralling and engaging online adventure. Consequently, in this composition, we shall explore the complexities of specifying the duration of an animation using CSS, a crucial proficiency that can augment the caliber of website animation.
animation-duration Property
The CSS property known as animation-duration is utilized to establish the length of time required for an animation to complete a single cycle. It designates the time frame of an animation in seconds (s) or milliseconds (ms). The default setting for the animation-duration property is 0s, indicating that the animation transpires instantaneously and has no duration. When a value is assigned to the animation-duration property, the animation persists for the allotted duration before halting or restarting, based on the animation-iteration-count property.
Syntax
animation-duration: <time>;
在这个上下文中，<time> 表示动画的时间跨度，以秒（s）或毫秒（ms）为单位。数量可以是分数或整数。
Approach
在CSS中定义动画的持续时间，请按照以下步骤：
立即学习“前端免费学习笔记（深入）”；
使用@keyframes规则定义动画。该规则指定动画的起始点和结束点。
使用animation-name属性将动画应用于元素。此属性将动画链接到元素。
通过使用animation-duration属性来指示动画的持续时间。此属性确定了动画完成其序列所需的时间量。
Optionally, set the number of times the animation should repeat using the animation-iteration-count property. This property controls how many times the animation should play before stopping.
Example
The following HTML code segment above delineates the span of an animation in CSS. Firstly, the @keyframes decree explicates an animation that alters the backdrop color of an entity from red to yellow. The starting and ending points of the animation are designated by the from and to expressions in the @keyframes regulation. Here, the animation starts with a red background and culminates with a yellow background. Then, the div component is adorned with CSS attributes. The width and height attributes fix the size of the div entity, and the background-color property specifies the beginning background color as red. The animation-name attribute associates the animation laid out in the @keyframes regulation to the div entity. The animation-duration attribute determines the duration of the animation in seconds. In this instance, the animation will be two seconds long. Lastly, the animation-iteration-count attribute is set to an infinite value to generate an incessant animation loop until the user interacts with the webpage.
<!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>
Conclusion
总之，在CSS中确定动画的特定时间范围的过程需要细致的关注和深思熟虑。各种因素的交汇，如动画的复杂性和用户的参与度，决定了最佳持续时间。因此，设计师们要非常重视这些微妙之处，并明智地应用到他们的作品中。通过这样做，他们可以确保他们的动画不仅以其视觉魅力令人着迷，而且以其无可挑剔的执行而受到喜爱。
