search

Home  >  Article  >  Web Front-end  >  What is the css3 animation property name?

What is the css3 animation property name?

WBOY
WBOYOriginal
2022-01-24 11:30:271640browse

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".

What is the css3 animation property name?

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the name of the css3 animation attribute?

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:

What is the css3 animation property name?

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:

What is the css3 animation property name?

(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!

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：What are the three ways to use css3Next article：What are the three ways to use css3

Related articles

See more