Home  >  Article  >  Web Front-end  >  How to use css animation-duration property

How to use css animation-duration property

藏色散人
藏色散人Original
2019-05-29 09:18:333533browse

css animation-duration property is used to define the time required for animation to complete a cycle, in seconds or milliseconds; the basic syntax is animation-duration: time.

How to use css animation-duration property

How to use the css animation-duration property?

Function: The animation-duration attribute defines the time required for the animation to complete a cycle, measured in seconds or milliseconds.

Syntax:

animation-duration: time

Description: 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.

css animation-duration property 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>

Effect:

How to use css animation-duration property

The above is the detailed content of How to use css animation-duration property. For more information, please follow other related articles on the PHP Chinese website!

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