CSS3 creates animations through @keyframes

This article mainly introduces to you the relevant information about CSS3 @keyframes simple animation implementation. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Definition:

An 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 versions of the browser.

Syntax:

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

##css-stylesRequired. One or more legal CSS style properties. ##

@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;}
}

animationname	Required. Defines the name of the animation.
keyframes-selector	Required. The percentage of animation duration. Legal values: ##0-100% ##from (same as 0%) to (same as 100%)

Use mymove animation method:

Selector

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

Summary: @keyframes are closely related to animation. If you want to master it thoroughly, you need to learn how to use animation together.

Related recommendations:

Create animated Google map markers based on CSS and JavaScript_html/css_WEB-ITnose

##jQuery Use animate to create animation usage examples_jquery

10 recommended articles about keyframes

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