JSFiddle - React, Tailwind, and code Playground

by monodyle

HTML

<div class="square"></div>

CSS

body {
  padding: 5vw;
}

.square { 
  width: 48px;
  height: 48px;
  background-color: #F29393;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-name: use-margin;
}


@keyframes use-transform {
  from {
    transform: translate(80vw);
  }
  
  to {
    transform: translate(0);
  }
}

@keyframes use-margin {
  from {
    margin-left: 80vw;
  }
  
  to {
    margin-left: 0;
  }
}