<!DOCTYPE html> | |
<style> | |
.box { | |
height: 100px; | |
width: 100px; | |
background-color: blue; | |
} | |
#box { | |
animation-name: anim; | |
animation-duration: 1s; | |
animation-delay: -0.5s; | |
animation-play-state: paused; | |
animation-timing-function: linear; | |
} | |
@keyframes anim { | |
from { transform: rotate(0deg) translate(-100px, 0); } | |
to { transform: rotate(180deg) translate(300px, 0); } | |
} | |
</style> | |
<div class="box" id="box"></div> |