JSFiddle - React, Tailwind, and code Playground

by Lauro Moraes

HTML

<div id="stage">
<div id="traveler">
    <a href="#"><div id="bouncer"><!-- --></div></a>
</div>
</div>

CSS

/* keyframes definition for WebKit browsers */

@-webkit-keyframes travel {
  from { left: 0;     }
  to   { left: 330px; }
}

@-webkit-keyframes bounce {
  from, to  {
    bottom: 0;
    -webkit-animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    -webkit-animation-timing-function: ease-in;
  }
}

@-webkit-keyframes spin {
  from {                                     }
  to   { -webkit-transform: rotateZ(360deg); }
}

/* keyframes definition for other browsers */

@keyframes travel {
  from { left: 0;     }
  to   { left: 640px; }
}

@keyframes bounce {
  from, to  {
    bottom: 0;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 220px;
    animation-timing-function: ease-in;
  }
}

@keyframes spin {
  from {
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* styles for the stage and animated elements */

#stage {
  position: relative;
  margin: 1em auto;
  width: 350px;
  height: 240px;
  border: 2px solid #666;
  background: #cff;
}

#traveler {
  position: absolute;
  width: 20px;
  height: 240px;

  -webkit-animation-name: travel;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-duration: 6.8s;

  animation-name: travel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 6.8s;
}

#bouncer {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: red;
  background: -webkit-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -moz-radial-gradient(60% 40%, circle, rgba(255,255,255,0.8), red 50%) red;
  background: -o-radial-gradient(60% 40%, circle,...