Implementation of @keyframes animation in CSS3

This article mainly introduces the relevant information about the simple animation implementation of CSS3 @keyframes. The content is quite good. I will share it with you now and give it as a reference.

CSS3 @keyframes simple animation implementation

Definition:

Animation can be created through @keyframes rules.

The principle of creating animation is to gradually change one set of CSS styles into another set of styles.

During the animation process, this set of CSS styles can be changed multiple times.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start time of the animation, 100% is the end time of the animation.

For best browser support, 0% and 100% selectors should always be defined.

Important: Compatibility issue! @keyfrmes Not compatible with IE 9 and earlier browsers.

Syntax:

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
//多个特性变化，用;隔开.

@-webkit-keyframes mymove{

0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示无限次循环，也可设置次数n：
                                           animation-interation-count:n*/ 
}

Analysis on Media Queries of CSS3

Using CSS3 to implement eight groups of super cool mice Slide over picture animation

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