1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 div
 6 {
 7 width:100px;
 8 height:100px;
 9 background:red;
10 animation:myfirst 5s;
11 -moz-animation:myfirst 5s; /* Firefox */
12 -webkit-animation:myfirst 5s; /* Safari and Chrome */
13 -o-animation:myfirst 5s; /* Opera */
14 }
15 
16 @keyframes myfirst
17 {
18 from {background:red;}
19 to {background:yellow;}
20 }
21 
22 @-moz-keyframes myfirst /* Firefox */
23 {
24 from {background:red;}
25 to {background:yellow;}
26 }
27 
28 @-webkit-keyframes myfirst /* Safari and Chrome */
29 {
30 from {background:red;}
31 to {background:yellow;}
32 }
33 
34 @-o-keyframes myfirst /* Opera */
35 {
36 from {background:red;}
37 to {background:yellow;}
38 }
39 </style>
40 </head>
41 <body>
42 
43 <div></div>
44 
45 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
46 
47 </body>
48 </html>
View Code
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 div
 6 {
 7 width:100px;
 8 height:100px;
 9 background:red;
10 animation:myfirst 5s;
11 -moz-animation:myfirst 5s; /* Firefox */
12 -webkit-animation:myfirst 5s; /* Safari and Chrome */
13 -o-animation:myfirst 5s; /* Opera */
14 }
15 
16 @keyframes myfirst
17 {
18 0%   {background:red;}
19 25%  {background:yellow;}
20 50%  {background:blue;}
21 100% {background:green;}
22 }
23 
24 @-moz-keyframes myfirst /* Firefox */
25 {
26 0%   {background:red;}
27 25%  {background:yellow;}
28 50%  {background:blue;}
29 100% {background:green;}
30 }
31 
32 @-webkit-keyframes myfirst /* Safari and Chrome */
33 {
34 0%   {background:red;}
35 25%  {background:yellow;}
36 50%  {background:blue;}
37 100% {background:green;}
38 }
39 
40 @-o-keyframes myfirst /* Opera */
41 {
42 0%   {background:red;}
43 25%  {background:yellow;}
44 50%  {background:blue;}
45 100% {background:green;}
46 }
47 </style>
48 </head>
49 <body>
50 
51 <div></div>
52 
53 <p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
54 
55 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
56 
57 </body>
58 </html>
View Code
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style> 
 5 div
 6 {
 7 width:100px;
 8 height:100px;
 9 background:red;
10 position:relative;
11 animation:myfirst 5s;
12 -moz-animation:myfirst 5s; /* Firefox */
13 -webkit-animation:myfirst 5s; /* Safari and Chrome */
14 -o-animation:myfirst 5s; /* Opera */
15 }
16 
17 @keyframes myfirst
18 {
19 0%   {background:red; left:0px; top:0px;}
20 25%  {background:yellow; left:200px; top:0px;}
21 50%  {background:blue; left:200px; top:200px;}
22 75%  {background:green; left:0px; top:200px;}
23 100% {background:red; left:0px; top:0px;}
24 }
25 
26 @-moz-keyframes myfirst /* Firefox */
27 {
28 0%   {background:red; left:0px; top:0px;}
29 25%  {background:yellow; left:200px; top:0px;}
30 50%  {background:blue; left:200px; top:200px;}
31 75%  {background:green; left:0px; top:200px;}
32 100% {background:red; left:0px; top:0px;}
33 }
34 
35 @-webkit-keyframes myfirst /* Safari and Chrome */
36 {
37 0%   {background:red; left:0px; top:0px;}
38 25%  {background:yellow; left:200px; top:0px;}
39 50%  {background:blue; left:200px; top:200px;}
40 75%  {background:green; left:0px; top:200px;}
41 100% {background:red; left:0px; top:0px;}
42 }
43 
44 @-o-keyframes myfirst /* Opera */
45 {
46 0%   {background:red; left:0px; top:0px;}
47 25%  {background:yellow; left:200px; top:0px;}
48 50%  {background:blue; left:200px; top:200px;}
49 75%  {background:green; left:0px; top:200px;}
50 100% {background:red; left:0px; top:0px;}
51 }
52 </style>
53 </head>
54 <body>
55 
56 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
57 
58 <div></div>
59 
60 </body>
61 </html>
View Code