JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<div class="mover"></div>

<div class="shaker"></div>

CSS

div.mover {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      -webkit-animation: mymove 10s infinite;
      /* Chrome, Safari, Opera */
      animation: mymove 10s infinite;
      z-index: -1;
    }
    
    div.shaker {
      width: 1000px;
      height: 100px;
      top: 100px;
      background: black;
      z-index: 10000;
    }
    
    @-webkit-keyframes mymove {
      0% {
        top: 0px;
        left: 0px;
      }
      25% {
        top: 0px;
        left: 100px;
      }
      50% {
        top: 0px;
        left: 0px;
      }
      75% {
        top: 50px;
        left: 0px;
      }
      100% {
        top: 100px;
        left: 0px;
      }
    }
    
    @keyframes mymove {
      0% {
        top: 0px;
        left: 0px;
      }
      25% {
        top: 0px;
        left: 100px;
      }
      50% {
        top: 0px;
        left: 0px;
      }
      75% {
        top: 50px;
        left: 0px;
      }
      100% {
        top: 100px;
        left: 0px;
      }
    }