Introduce the differences between css3 transition and animation

CSS3 Transition

In CSS3, when we can change from one style to another in order to add a certain effect, there is no need to use FlashAnimation or JavaScript . Move the mouse over the following element:

That is to say, after we set the element transition, if we suddenly change the attribute of the element, it will slowly transition over,

Include the following methods. When the width of an element is suddenly changed, it will change to the value you changed after 2 seconds.

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

CSS3 animation

CSS3, we can create animation, it can Replaces many web page animated images, Flash animations, and JAVAScripts.

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
  
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

Animation is a preset animation process, and CSS3 will be executed according to this process.

The above is the detailed content of Introduce the differences between css3 transition and animation. For more information, please follow other related articles on the PHP Chinese website!