css 渐变动画

.destination1 .current{
display:block;
animation:danru 2s linear infinite;
-webkit-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;}
}

原文地址:https://www.cnblogs.com/hgj123/p/3684829.html