Multiple step animation of an element with CSS only

If you want to move elements around the screen in multiple steps, you can use CSS animations for that.

Demo:

HOVER ME

Code:

<style>
@keyframes to-center {
0% { left: 20%; top: 10%; height: 10%; width: 10%; transform: rotate(0deg); }
5% { left: 20%; top: 90%; height: 10%; width: 10%; transform: rotate(0deg); }
10% { left: 90%; top: 90%; height: 10%; width: 10%; transform: rotate(0deg); }
15% { left: 45%; top: 45%; height: 10%; width: 10%; transform: rotate(0deg); }
20% { left: 0; top: 0; height: 100%; width: 100%; transform: rotate(0deg); }
90% { left: 0; top: 0; height: 100%; width: 100%; transform: rotate(1200deg); }
100% { left: 20%; top: 10%; height: 10%; width: 10%; transform: rotate(0deg); }
}
.fullwidth {
position: relative;
height: 500px;
width: 100%;
background-color: red;
overflow: hidden;
}
.moving {
position: absolute;
top: 10%;
left: 20%;
width: 10%;
height: 10%;
background: yellow;
}
.fullwidth:hover .moving {
animation: to-center 10s infinite;
}
</style>
<div class="fullwidth">HOVER ME
<div class="moving">
</div>
</div>