CSS3 Tutorial-Animation

Perhaps you have seen a lot of techniques about CSS3 animation, including some previously published on front-end development, so now please take a look at the CSS3 Tutorial - Basics of Animation.

CSS3 animation:

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many web pages.

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.

Browser support:

Internet Explorer 10, Firefox and Opera support @keyframes rules and animation properties.

Chrome and Safari require the prefix -webkit-.

Note: Internet Explorer 9, and earlier, does not support the @keyframe rule or the animation attribute.

Example:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

CSS3 animation:

When you create animation in @keyframes, please bind it to a selector, otherwise the animation effect will not be produced .

By specifying at least the following two CSS3 animation properties, you can bind the animation to the selector:

1. Specify the name of the animation;

2. Specify the animation duration.

Example:

Bind the "myfirst" animation to the div element, duration: 5 seconds:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

Note: You must define the name and duration of the animation. If duration is omitted, animation will not be allowed as the default value is 0.

What is animation in CSS3?

Animation is the effect of gradually changing an element from one style to another.

You can change as many styles as you want as many times as you like.

Please use percentage to specify the time when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start of the animation, 100% is the completion of the animation.

For best browser support, you should always define 0% and 100% selectors.

Example:

Change the background color when the animation is 25% and 50%, then change it again when the animation is 100% complete:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}

Example:

Change background color and position:

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

CSS3 animation properties:

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

The following two examples set all animation properties:

Example:

Run an animation named myfirst with all animation properties set:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 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;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

Example:

is the same as the above animation, but uses the abbreviated animation animation attribute:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

The above is the content of CSS3 tutorial-animation. For more related content, please pay attention to the PHP Chinese website (www .php.cn)!