Home > Article > Web Front-end > What is the use of the animation-duration attribute?

What is the use of the animation-duration attribute?

青灯夜游Original: 2019-01-31 10:47:535602browse

The animation-duration attribute is used to define the time required for the animation to complete a cycle, in seconds or milliseconds; when the value is 0, it means there is no animation effect.

CSS3 animation-duration property

Function: animation-duration property Defines the time it takes for the animation to complete one cycle, in seconds or milliseconds.

Syntax:

animation-duration: time

time: Specifies the time it takes to complete the animation. The default value is 0, which means no animation effect.

Note: Internet Explorer 9 and earlier versions do not support the animation-duration attribute.

CSS3 animation-duration property usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:2s;

/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:2s;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

<div></div>

<p><b>注：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>

</body>
</html>

Rendering:

What is the use of the animation-duration attribute?

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of What is the use of the animation-duration attribute?. For more information, please follow other related articles on the PHP Chinese website!

php css3 animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the animation-name attribute in CSS3Next article：How to use the animation-name attribute in CSS3

See more

What is the use of the animation-duration attribute?

Related articles