How to use the animation-name attribute to call animation? css animation usage guide

In CSS styles, before we can use animations, we must use @keyframes to define animations. However, animations defined using keyframes are not very good at executing. We really need the animation-name attribute to achieve the effect of animation, so in In CSS styles, how do we use the animation-name attribute to implement it? Let’s summarize how to use the animation-name attribute to call animations? A complete list of css animation usage.

Before realizing the animation effect, we must first understand the animation-name attribute:

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. The premise must be case-sensitive. If there is an inconsistency, it may not To have any effect, for the compatibility of other browsers, we can add a webkit prefix in front.

The code is as follows:

<style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        @-webkit-keyframes mytransform
        {
            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;
        }
    </style>

In the above code, we use keyframes to define two animations, but as long as we use animation-name to call mytransform, the mytransform animation will take effect, and mycolor will not take effect. In the mytransform animation, in the div, we change the border-radius attribute value from 0 to 50px, and then from 50% to 100%, keeping the attribute unchanged and moving it horizontally to the right. 50px.

Many students will have this question. We all use the hover pseudo-class to realize that the animation will not start until the mouse moves to the element, so when we open the web page the first time I just want to have an animation effect, how to implement it?

In fact, it is also very simple. We find the style in the div where the mouse pointer stays in the div, remove it, and change the style to the style of the div element itself. Then the page will not play immediately when it is opened.

The above is how to use the animation-name attribute to call animation? A complete introduction to the usage of css animation. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use the animation-name attribute to call animation? css animation usage guide. For more information, please follow other related articles on the PHP Chinese website!