Tutorial on using css animation animation

Everyone knows that no matter what the project is, one thing that must be paid attention to in the front end is compatibility. Today I will tell you about the issue of compatibility verification.

We know that no matter what front-end project you do, one thing you must pay attention to is compatibility, so today we will bring you a detailed guide. Let’s take a look at which browsers require compatibility verification.

We know that various animations and special effects can be created through the powerful CSS3, which can replace images, Flash animations and JavaScript in many web pages. Today we will introduce to you @keyframes of CSS3 Rules

CSS3 @keyframes Rules

To create animations in CSS3, you need to learn the @keyframes rules.

@keyframes rules are used to create animations. By specifying a CSS style in @keyframes, you can create an animation effect that gradually changes from the current style to the new style.

So how to use Css animation to change the background and position, the code is as follows:

@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;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
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 和 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;}
}
 
@-o-keyframes myfirst /* Opera */
{
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;}
}

I believe you have mastered the method after reading these cases, more Please pay attention to other related articles on the php Chinese website!

Related reading:

CSS3’s detailed introduction to the translate attribute

CSS3’s detailed introduction to the background-size attribute

How to use CSS3 function rotate()

The above is the detailed content of Tutorial on using css animation animation. For more information, please follow other related articles on the PHP Chinese website!