CSS3 animationLOGIN

CSS3 animation

CSS3 Animation

With CSS3, we can create animations, which can replace many web page animated images, Flash animations, and JAVAScripts.


CSS3 @keyframes Rules

To create CSS3 animations, you will have to understand the @keyframes rules.

@keyframes rule is to create animations. Specify a CSS style and animation within the @keyframes rule that will gradually change from the current style to the new style.


CSS3 Animations

When creating animations in @keyframes, bind it to a selector, otherwise the animation won't happen any effect.

Specify that at least two CSS3 animation properties are bound to a selector:

Specify the name of the animation and specify the duration of the animation


Example

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

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

Run the program and try it


What is CSS3 animation?

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@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 and 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;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释:</b>当动画完成时,会变回初始的样式。</p>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
</body>
</html>

Run the program and try it


Example

Change the background color and position:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s;
            -webkit-animation:myfirst 5s; /* Safari and Chrome */
        }
        @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;}
        }
        @-webkit-keyframes myfirst /* Safari and 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;}
        }
    </style>
</head>
<body>
<div>css动画</div>
</body>
</html>

Run the program and try it


CSS3 animation properties

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

PropertiesDescriptionCSS
@keyframesSpecifies animation. 3
animationShorthand property for all animation properties, except animation-play-state property. 3
animation-nameSpecifies the name of @keyframes animation. 3
animation-durationSpecifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0. 3
animation-timing-functionSpecifies the speed curve of animation. The default is "ease". 3
animation-delaySpecifies when the animation starts. The default is 0. 3
animation-iteration-countSpecifies the number of times the animation is played. The default is 1. 3
animation-directionSpecifies whether the animation plays in reverse in the next cycle. The default is "normal". 3
animation-play-stateSpecifies whether the animation is running or paused. The default is "running". 3


##Example

Run myfirst animation and set all properties:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation-name:myfirst;
            animation-duration:5s;
            animation-timing-function:linear;
            animation-delay:2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running;
            /* Safari and 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;
        }
        @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;}
        }
        @-webkit-keyframes myfirst /* Safari and 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;}
        }
    </style>
</head>
<body>
<div>css动画</div>
</body>
</html>

Same as the above animation, but using the abbreviated animation animation property:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s linear 2s infinite alternate;
            /* Firefox: */
            -moz-animation:myfirst 5s linear 2s infinite alternate;
            /* Safari and Chrome: */
            -webkit-animation:myfirst 5s linear 2s infinite alternate;
            /* Opera: */
            -o-animation:myfirst 5s linear 2s infinite alternate;
        }
        @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 and 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;}
        }
    </style>
</head>
<body>
<p>css 动画</p>
<div></div>
</body>
</html>

Program running result:



Next Section

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @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;} } @-webkit-keyframes myfirst /* Safari and 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;} } </style> </head> <body> <div>css动画</div> </body> </html>
submitReset Code
ChapterCourseware