JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<div id="canvas">

  <div id="logo"> </div>
  <div id="base"> </div>
</div>

CSS

@-webkit-keyframes slide {
  from {
    background-position: 0px;
  }
  to {
    background-position: 589px;
  }
}

#base {
  width: 600px;
  height: 228px;
  background-color: #1F77B7;
}

#logo {
  width: 600px;
  height: 228px;
  background: url(http://www.aegir.co.za/proto/tide/TideClock/wave.png);
  -webkit-animation: slide 5s linear infinite;
}

#canvas {
  position: absolute;
  width: 600px;
  height: 600px;
}

JavaScript

/*for (i = 0; i < 100; i++) { 
document.getElementById('base').style.height = i;
}*/

document.getElementById('base').style.height = 100;