css3中动画animation的应用 

<!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>

 

posted @ 2015-04-11 15:19  小军的代码库  阅读(247)  评论(0)    收藏  举报