Shulou(Shulou.com)06/01 Report--

This article is about how to use the animation attribute in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Animation-duration attribute

In CSS3, we can use the animation-duration property to set the duration of the animation, that is, the total time it takes to complete from 0% to 100%. The animation-duration property is similar to the transition-duration property in the CSS3 transition.

Syntax:

Animation-duration: time

Description:

The value of the animation-duration attribute is a time in s (seconds), which can be a decimal such as 0.5s.

For example:

CSS3animation-duration attribute

@-webkit-keyframesmytranslate

{

0% {}

100% {- webkit-transform:translateX (100px);}

}

Div:not (# container)

{

Width:40px

Height:40px

Border-radius:20px

Background-color:red

-webkit-animation-name:mytranslate

-webkit-animation-timing-function:linear

}

# container

{

Display:inline-block

Width:140px

Border:1pxsolidsilver

}

# div1 {- webkit-animation-duration:2s;margin-bottom:10px;}

# div2 {- webkit-animation-duration:4s;}

The effect is as follows:

11-4-1.png

Analysis:

In this example, we animate the elements for # div1 for 2s and for # div2 for 4s. From the online test, we can see the effect obviously.

In a word, CSS3 animation is often combined with CSS3 deformation to achieve gorgeous and complex animation effects.

Thank you for reading! This is the end of this article on "how to use the animation attribute in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.