<!DOCTYPE html>
<html>
<head>
<style>
/*
@-webkit-keyframes anim1 { // 规定动画。
0% {
Opacity: 0;
font-size: 12px;
}
100% {
Opacity: 1;
font-size: 34px;
}
}
.anim1Div {
-webkit-animation-name: anim1 ; 规定 @keyframes 动画的名称
-webkit-animation-duration: 1.5s; 规定动画完成一个周期所花费的秒或毫秒。默认是 0
-webkit-animation-iteration-count: 400; 规定动画被播放的次数。默认是 1。
-webkit-animation-direction: alternate; 规定动画是否在下一周期逆向地播放。默认是 "normal"。
-webkit-animation-timing-function: ease-in-out; 规定动画的速度曲线。默认是 "ease"。
} */
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 /* 需要用@keyframes来申明动画的名称*/
{/*从0%一直到100%的渐变过程*/
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><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
