@-webkit-keyframes moved{ 0%{ top: 0; left: 0; } 10%{ top: 3em; left: 3em; background: red; } 20%{ top: 0; left: 6em; background: green; } 30%{ top: 3em; left: 9em; background: yellow; border: .5em red dashed; } 40%{ top: 0; left: 12em; background: orange; border: .5em green dashed; } 50%{ top: 3em; left: 15em; background: pink; border: .5em navy dashed; } 60%{ top: 0; left: 12em; background: maroon; border: .5em lightgray dashed; } 70%{ top: 3em; left: 9em; background: blue; } 80%{ top: 0; left: 6em; background: cyan; border: .5em maroon dashed; } 90%{ top: 3em; left: 3em; background: magenta; } 100%{ top: 0; left: 0; background: orange; border: .5em lightgray dashed; } } div{ width: 5em; height: 5em; position: relative; border: .5em lightgray dashed; border-radius: 5em; background: orange; -webkit-animation: moved 15s infinite; transition: 1.2s; } body{ background: -webkit-linear-gradient(left, cornflowerblue, whitesmoke); }