Animating @keyframes using CSS3

CSS3's @keyframes, which can replace many web pages' animated images, Flash animations, and JAVAScripts.

CSS3 animationProperties

The following table lists the @keyframes rules and all animation properties:

Browser support

The number in the table indicates the first browser version number that supports this attribute.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports this prefix attribute.

Example:

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

When in @keyframes Create the animation and bind it to a selector, otherwise the animation will have no effect.

Specify that at least two CSS3 animation properties are bound to a selector:

• Specify the name of the animation

• Specify the duration of the animation

For example:

p{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */}

Note: You must define the duration of the animation The name and duration of the animation. If the duration is omitted, the animation will not run because the default value is 0.

Example: Note: This example is invalid in Internet Explorer 9 and earlier IE versions.

p{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}@keyframes myfirst{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}}

@-webkit-keyframes myfirst /* Safari and Chrome */{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}}

The above is the detailed content of Animating @keyframes using CSS3. For more information, please follow other related articles on the PHP Chinese website!