How to define duration of animation completion in CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to define duration of animation completion in CSS?

王林

Sep 09, 2023 pm 06:49 PM

How to define duration of animation completion in CSS?

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>;

在这个上下文中，表示动画的时间跨度，以秒（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 id="How-to-define-the-duration-of-an-animation-takes-to-complete-in-CSS">How to define the duration of an animation takes to complete in CSS?</h4>
      <div></div>
   </body>
</html>

Conclusion

总之，在CSS中确定动画的特定时间范围的过程需要细致的关注和深思熟虑。各种因素的交汇，如动画的复杂性和用户的参与度，决定了最佳持续时间。因此，设计师们要非常重视这些微妙之处，并明智地应用到他们的作品中。通过这样做，他们可以确保他们的动画不仅以其视觉魅力令人着迷，而且以其无可挑剔的执行而受到喜爱。

The above is the detailed content of How to define duration of animation completion in CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about