JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<input type = "number" name = "my-num" title = "dashes or comma"/>

CSS

.red {
  animation: 3s slide-margin linear infinite;
  background: red;
  width: 30px;
  height: 30px;
}

@keyframes slide-margin {
  from {margin-left: 0;}
  50% {margin-left: 100%;}
  to {margin-left: 0;}
}

.green {
  animation: 3s go-and-hide linear infinite;
  width: 30px;
  height: 30px;
  background: green;
  opacity: 0%;
}

@keyframs go-and-hide {
  from {transform: translatex(0);}
  20% {transform: translatex(0);}
  
  25% {opacity: 100%; transform: translatex(100px); }
  45% {transform: translatex(100px); }
  
  50% {transform: translatex(200px); }
  70% {transform: translatex(200px); }
  
  75% {transform: translatex(300px); }
  95% {opacity: 0%; transform: translatex(300px); }
  
  to {transform: translatex(0);}
}

@keyframes slide-transform {
  from {transform: translatex(0);}
  20% {transform: translatex(0);}
  
  25% {transform: translatex(100px); }
  45% {transform: translatex(100px); }
  
  50% {transform: translatex(200px); }
  70% {transform: translatex(200px); }
  
  75% {transform: translatex(300px); }
  95% {transform: translatex(300px); }
  
  to {transform: translatex(0);}
}