动画渐变兼容各个浏览器

.destination1 .current{
display:block;
animation:danru 2s linear infinite;
-webkit-animation:danru 2s linear alternate ;
-moz-animation:danru 2s linear alternate ;
-o-animation:danru 2s linear alternate ;

}
@keyframes danru{
0% {opacity:0.00;left:0px; top:0px;}
25% {opacity:0.25;left:50px; top:0px;}
50% {opacity:0.50;left:100px; top:0px;}
75% {opacity:0.75;left:150px; top:0px;}
100% {opacity:1.0; left:200px; top:0px;}
}

@-webkit-keyframes danru{
0% {opacity:0.00;left:0px; top:0px;}
25% {opacity:0.25;left:50px; top:0px;}
50% {opacity:0.50;left:100px; top:0px;}
75% {opacity:0.75;left:150px; top:0px;}
100% {opacity:1.0; left:200px; top:0px;}
}
@-moz-keyframes danru{
0% {opacity:0.00;left:0px; top:0px;}
25% {opacity:0.25;left:50px; top:0px;}
50% {opacity:0.50;left:100px; top:0px;}
75% {opacity:0.75;left:150px; top:0px;}
100% {opacity:1.0; left:200px; top:0px;}
}
@-o-keyframes danru{
0% {opacity:0.00;left:0px; top:0px;}
25% {opacity:0.25;left:50px; top:0px;}
50% {opacity:0.50;left:100px; top:0px;}
75% {opacity:0.75;left:150px; top:0px;}
100% {opacity:1.0; left:200px; top:0px;}
}

posted @ 2014-05-29 16:50  麦田守望者~  阅读(236)  评论(0编辑  收藏  举报