css-extra-kf2

by jeanmichelricher

HTML

<section>
    <div class="square1"></div>
    <div class="square2"></div>
</section>

CSS

body {
    padding: 40px;
}

.square1 {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  top: 0; left : 0;
  animation: move_around 5s infinite;
}

.square2 {
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  top: 0; left : 0;
  animation: move_around 5s infinite 2s;
}


@keyframes move_around {
    0% { left: 0; top: 0; }
    25% { left: 200px; top: 0; }
    50% { left: 200px; top: 100px; }
    75% { left: 0; top: 100px; }
    100% { left: 0; top: 0;}
}