In CSS3, the animation attribute name is "animation", which is an abbreviated attribute used to specify the bound keyframe name, animation time, speed curve, animation delay, animation times and whether to play in reverse Animation, the syntax is "animation: name time speed delay times whether to play in reverse direction".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
The animation attribute is an abbreviated attribute used to set six animation attributes:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
Note: Always specify the animation-duration attribute, otherwise If the duration is 0, the animation will not be played.
The syntax is:
animation: name duration timing-function delay iteration-count direction;
The value represented by the parameter is:
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
<div></div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What is the css3 animation property name?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
