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中確定動畫的特定時間范圍的過程需要細致的關注和深思熟慮。各種因素的交匯，如動畫的復雜性和用戶的參與度，決定了最佳持續時間。因此，設計師們要非常重視這些微妙之處，并明智地應用到他們的作品中。通過這樣做，他們可以確保他們的動畫不僅以其視覺魅力令人著迷，而且以其無可挑剔的執行而受到喜愛。
以上就是如何在CSS中定義動畫完成的持續時間？的詳細內容，更多請關注www.92cms.cn其它相關文章！
