Home > Article > Web Front-end > Implementation of @keyframes animation in CSS3

Implementation of @keyframes animation in CSS3

不言Original: 2018-06-26 11:52:282244browse

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

##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%

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 them thoroughly, you need to learn them together with animation usage.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analysis on Media Queries of CSS3Next article：Analysis on Media Queries of CSS3

See more

Implementation of @keyframes animation in CSS3

Related articles