CSS3 Animation Properties-Animation

Have already learned a css3 in Transition ( css3 animation attributes), the Transform (css3 deformation properties). Today to learn another css3 animation property animation , is this similar to our animate in jQuery ?

We also know that transitions can change from one state to another. The code is similar to: transition:color 0.2s easy-in-out .1s;

So why do you need this animation attribute? The reason may be that the transition is too limited, and the animation can be used to perform several state transitions by percentage. From 0% to 20% to 40%. Up to 60% to 100%. Yes, this is where the function of this animation is.

CSS3 animation

Using CSS3, we can create animations that can replace many web animated images, Flash animations and JavaScript .

CSS3 keyframe rules

To create CSS3 animations, you must understand @Keyframes .

The rule for @keyframes is to create animations. The CSS styles and animations specified in the @Keyframe rules will gradually change from the current style to the new style.

Browser support

@keyframes IDENT {
    from {
        Properties: Properties value;
    }
     Percentage {
        Properties: Properties value;
    }
     to {
        Properties: Properties value;
    }
}
/*or all written as a percentage:*/
@keyframes IDENT {
    0% {
        Properties: Properties value;
    }
     Percentage {
        Properties: Properties value;
    }
     100% {
        Properties: Properties value;
    }
}

@keyframes myfirst {
    from {
        background: red;
    }
 
    to {
        background: yellow;
    }
}
 
@-moz-keyframes myfirst /* Firefox */
{
    from {
        background: red;
    }
 
    to {
        background: yellow;
    }
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {
        background: red;
    }
 
    to {
        background: yellow;
    }
}
 
@-o-keyframes myfirst /* Opera */
{
    from {
        background: red;
    }
 
    to {
        background: yellow;
    }
}
div {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s; /* Firefox */
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
    -o-animation: myfirst 5s; /* Opera */
}

The properties of animation have the following contents:

 -webkit-animation-name: 'wobble'; /* animation property name, which is the animation name defined by our previous keyframes */
     -webkit-animation-duration: 10s; /* animation duration */
     -webkit-animation-timing -function: ease-in-out; /* The animation frequency is the same as the transition-timing-function */
     -webkit-animation-delay: 2s;/* animation delay time*/
     -webkit-animation-iteration-count: 10; /* define the loop data, infinite is unlimited */
     -webkit-animation-direction: alternate; /* define the animation mode */