CSS3 animation transition duration

Detailed explanation of animation-duration property of CSS3:
This property is used to set the transition duration of animation animation.
For more information about the animation attribute, please refer to the detailed explanation of the usage of the animation attribute of CSS3.
Grammar structure:

animation-duration：<time> [ ,<time>]*

Parameter analysis:
time: Specifies the duration of animation execution, the unit is seconds (s).
Special instructions:
If multiple attribute values are provided, separate them with commas.
The corresponding script feature is animationDuration.
Code example:
Example 1:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.php.cn/" />  
<title>php中文网</title> 
<style type="text/css"> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
     
  animation:theanimation infinite alternate;
  -webkit-animation:theanimation infinite alternate ;
  -moz-animation:theanimation infinite alternate ;
  -o-animation:theanimation infinite alternate ;
  -ms-animation:theanimation infinite alternate ;
   
  -webkit-animation-duration:8s;
  -moz-animation-duration:8s;
  -o-animation-duration:8s;
  -ms-animation-duration:8s;
  animation-duration:8s;
}
@keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
  0% {top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
  0%{top:0px;left:0px;background:red;}
  25%{top:0px;left:100px;background:blue;}
  50%{top:100px;left:100px;background:yellow;}
  75%{top:100px;left:0px;background:green;}
  100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

The above code sets the animation duration to 8 seconds.
Example 2:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.php.cn/" />   
<title>php中文网</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
       
  animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -webkit-animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -moz-animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -o-animation:firstanimation infinite alternate,secondanimation infinite alternate; 
  -ms-animation:firstanimation infinite alternate,secondanimation infinite alternate;
    
  -webkit-animation-duration:5s,2s;  
  -moz-animation-duration:5s,2s;  
  -o-animation-duration:5s,2s;  
  -ms-animation-duration:5s,2s;    
  animation-duration:5s,2s;  
}
@keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-webkit-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-moz-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-o-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-ms-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
}
@keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-webkit-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-moz-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-o-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-ms-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

The above code uses animation-duration to specify two animation durations for two animations respectively.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:theanimation infinite alternate; -webkit-animation:theanimation infinite alternate ; -moz-animation:theanimation infinite alternate ; -o-animation:theanimation infinite alternate ; -ms-animation:theanimation infinite alternate ; -webkit-animation-duration:8s; -moz-animation-duration:8s; -o-animation-duration:8s; -ms-animation-duration:8s; animation-duration:8s; } @keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-moz-keyframes theanimation{ 0% {top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-webkit-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-o-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } </style> </head> <body> <div></div> </body> </html>

submit Reset Code

Automatic operation

CSS3 animation transition duration

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]