案例：CSS3案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
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>