css3运动后留下轨迹尾巴_css3圆形轨迹动画

css3圆形轨迹动画

@keyframes animX{

0% {left: 0px;}

100% {left: 500px;}

}

@keyframes animY{

0% {top: 0px;}

100% {top: 500px;}

}

#ball {

width: 20px;

height: 20px;

background-color: #f66;

border-radius: 50%;

position: absolute;

animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;

}

#lopp {

width: 498px;

height: 498px;

border: 2px solid #999;

border-radius: 50%;

position: absolute;

left: 9px;

top: 9px;

}