How to use css3 animation property-CSS Tutorial-php.cn

How to use css3 animation property

青灯夜游

Release： 2019-05-25 11:27:34

Original

6968 people have browsed it

css3 The animation property is a shorthand property that achieves animation effects by setting six animation properties. These six attributes are animation name, animation time, speed curve, animation delay, play times and whether the animation is played in reverse.

How to use css3 animation property

css3 animation property

Function: animation property is A shorthand property for setting six animation properties.

Syntax:

animation: name duration timing-function delay iteration-count direction;

Copy after login

Description: The six animation properties that can be set by the animation property are:

● animation- name: Specifies the keyframe name that needs to be bound to the selector.

● animation-duration: Specifies the time it takes to complete the animation, in seconds or milliseconds.

●　animation-timing-function: Specifies the speed curve of animation.

● animation-delay: Specifies the delay before the animation starts.

● animation-iteration-count: Specifies the number of times the animation should be played.

● animation-direction: Specifies whether the animation should be played in reverse in turn.

Note: The animation-duration attribute must always be set, otherwise when the duration is 0, the animation will not be played.

Example of using css3 animation property

<!DOCTYPE html>
<html>
<head>
<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 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>
</html>

Copy after login

Rendering:

How to use css3 animation property

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 How to use css3 animation property. For more information, please follow other related articles on the PHP Chinese website!