@keyframes move {
? 0%{
??? transform: translateY(90px);
??? background: orange;
? }
? 15%{
??? transform: translate(90px,90px);
??? background: yellow;
? }
? 30%{
??? transform: translate(180px,90px);
??? background:red;
? }
? 45%{
??? transform: translate(90px,90px);
??? background:blue;
? }
? 60%{
??? transform: translate(90px,0);
??? background:green;
? }
? 75%{
??? transform: translate(90px,90px);
??? background:purple;
? }
? 90%{
??? transform: translate(90px,180px);
??? background:red;
? }
? 100%{
??? transform: translate(90px,90px);
??? background: orange;
? }
}

div {
? width: 200px;
? height: 200px;
? border: 1px solid red;
? margin: 20px auto;
}
span {
? display: inline-block;
? width: 20px;
? height: 20px;
? border-radius:10px;
? background: orange;
? transform: translateY(90px);
? animation-name: move;
? animation-duration: .5s;
? animation-timing-function: ease-in;
? animation-delay: .2s;
? animation-iteration-count:infinite;
? animation-direction:alternate;
}