How to use animation Animation attribute in css3

This article introduces how to use animation animation attributes in css3, the content is very detailed, interested friends can refer to, hope to be helpful to you.

CSS is mainly used to describe the style and layout of web pages, and CSS3 is the latest CSS standard, which provides more methods and uses CSS3 to create animation to enrich the content of web pages. Today, I will share with you the animation attribute in css3-- animation.

Pay attention to the compatibility of browsers during use

InternetExplorer10, Firefox, and Opera support the animation attribute.

Safari and Chrome support-webkit-animation attribute

Therefore, browser compatibility should be taken into account in the process of writing programs.

Animation attribute

Lets you set six animation attributes:

(1) animation-name: specifies the name of the animation.

In animation-name:demo//InternetExplorer10, Firefox and Opera browsers

-webkit-animation-name:demo//Safari and Chrome

(2) animation-duration: the time taken to complete the animation (in seconds and milliseconds)

Animation-duration:3s

-webkit-animation-duration:3s

(3) animation-timing-function: animation speed curve

Linear: playing at a uniform speed

Ease: the animation starts slowly and then speeds up and slows down at the end (default)

Ease-in: animation starts at a low speed

Ease-out: refers to the animation ends at a low speed.

Ease-in-out: animation starts and ends at a low speed

Cubic-bezier: set the desired value from 0 to 1 in the cubic-bezier function.

Animation-timing-function:ease

-webkit-animation-timing-function:ease

(4) animation-delay: delay time for the start of animation

Animation-delay:3s

-webkit-animation-delay:3s

(5) animation-iteration-count: the number of times the animation is played

N: the number of times to customize the playback of the animation

Infinite: refers to the infinite loop playback of animation

Animation-iteration-count:4;// cycle four times

-webkit-animation-iteration-count:infinite;// loops countless times

(6) animation-direction: whether the animation is played in reverse in turn

Normal animation should play normally (default)

Alternate animation should be played in reverse in turn.

Animation-direction:normal

-webkit-animation-direction:alternate

Let a small square move in the direction of the lower right and upper left.

Div {width:100px; height:100px; background:red; position:relative; animation:demo; animation-iteration-count:infinite; animation-duration:2s; animation-timing-function:ease; animation-delay:0.1s; animation-direction:alternate;} / * SafariandChrome browser * /-webkit-animation:demo;/* Animation name * /-webkit-animation-iteration-count:infinite / * number of animation execution * /-time spent on webkit-animation-duration:5s;/* animation * /-webkit-animation-timing-function:ease;/* animation speed * /-webkit-animation-delay:2s;/* animation delay * /-whether webkit-animation-direction:alternate;/* animation is reversed * /} / * set animation running area * / @ keyframesdemo {0% {background-color:pink;left:0 Top:40px;} 25% {background-color:hotpink;left:300px;top:40px;} 50% {background-color:yellow;left:300px;top:340px;} 75% {background-color:blue;left:0;top:340px;} 100% {background-color:green;left:0;top:30px;}} / * SafariandChrome browser * / @-webkit-keyframesdemo {0% {background-color:pink;left:0;top:40px } 25% {background-color:hotpink;left:300px;top:40px;} 50% {background-color:yellow;left:300px;top:340px;} 75% {background-color:blue;left:0;top:340px;} 100% {background-color:green;left:0;top:30px;}}

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. About how to use animation animation attributes in css3 to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.