<style>
/*
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
*/
div {
width: 100px;
height: 100px;
background: red;
animation: myfirst 5s;
-webkit-animation: myfirst 5s;
/*注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。*/
/* Safari 与 Chrome */
}
@keyframes myfirst {
from {
background: red;
}
to {
background: yellow;
}
}
@-webkit-keyframes myfirst
/* Safari 与 Chrome */
{
from {
background: red;
}
to {
background: yellow;
}
}
</style>
<body>
<div class="myfirst">123</div>
</body>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
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;
}
}
<body>
<div class="myfirst">123</div>
</body>
注释：当动画完成时，会变回初始的样式。
注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。
---------------------------------------------------------------------------------------------------------------------------------------------------------------
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;
}
}
<body>
<div class="myfirst">123</div>
</body>