How to use the animation-name property of Animation in css
This article mainly introduces how to use the animation-name attribute of calling animation in css. It is very detailed and has certain reference value. Friends who are interested must finish reading it.
Before we animate, we need to take a look at the animation-name property:
Animation-name attribute syntax: animation-name: animation name
Note: when using the animation-name attribute to define a dialogue, we must use keyframes to name the same name, as long as it is case-sensitive. If there is inconsistency, it may not have any effect. For the compatibility of other browsers, we can add a webkit prefix.
The code is as follows:
@-webkit-keyframesmycolor
{
0% {background-color:red;}
30% {background-color:blue;}
60% {background-color:yellow;}
100% {background-color:green;}
}
@-webkit-keyframesmytransform
{
0% {border-radius:0;}
50% {border-radius:50px;-webkit-transform:translateX (0);}
100% {border-radius:50px;-webkit-transform:translateX (50px);}
}
Div
{
Width:100px
Height:100px
Background-color:red
}
Div:hover
{
-webkit-animation-name:mytransform
-webkit-animation-duration:5s
-webkit-animation-timing-function:linear
}
In the above code, we use keyframes to define two animations, but as long as we use animation-name to call mytransform,mytransform animation, mycolor will not take effect. In mytransform animation, in div, we change the border-radius attribute value from 0 to 50px, and then from 50% to 100%, and keep the attribute unchanged and move 50px horizontally to the right.
Many students will have this question, we all use the hover pseudo-class to achieve the mouse to move to this element, the animation will begin, so when we open the web page as soon as we want to appear animation effect, how to do it?
In fact, it is very simple, we find the style in div where the mouse pointer stays in div, and remove it, change the style to the style of the div element itself, and the page will be opened and will not be played immediately.
The above is all the content of this article "how to use the animation-name attribute of calling Animation in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
