<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="animated-element"></div>

</body>

</html>
div {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: red;
  animation: moving 2s infinite;
}

@keyframes moving {
0% {
left: 0px;
background: red;
}
25% {
background: yellow;
}
75% {
background: green;
}
100% {
left: 625px;
background: blue;
top: 100px;
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.