How to use the animation attribute in css
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!
