JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<div class="card">
<h1>CSS3!</h1>
</div>
<div class="card2">
<h1>JavaScript!</h1>
</div>

CSS

body {
  font-family: sans-serif;
}

@-webkit-keyframes throb {
  0% {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(359deg);
    -moz-transform: rotateZ(359deg);
    -ms-transform: rotateZ(359deg);
    -o-transform: rotateZ(359deg);
    transform: rotateZ(359deg);
  }
}

@-moz-keyframes throb {
  0% {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(359deg);
    -moz-transform: rotateZ(359deg);
    -ms-transform: rotateZ(359deg);
    -o-transform: rotateZ(359deg);
    transform: rotateZ(359deg);
  }
}

@-o-keyframes throb {
  0% {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(359deg);
    -moz-transform: rotateZ(359deg);
    -ms-transform: rotateZ(359deg);
    -o-transform: rotateZ(359deg);
    transform: rotateZ(359deg);
  }
}

@keyframes throb {
  0% {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(359deg);
    -moz-transform: rotateZ(359deg);
    -ms-transform: rotateZ(359deg);
    -o-transform: rotateZ(359deg);
    transform: rotateZ(359deg);
  }
}

.card2, .card {
  position: absolute;
  top: 200px;
  left: 40px;
}
.card2 h1, .card h1 {
  font-weight: normal;
}

.card {
  top: 40px;
  -webkit-animation-duration: 10s;
  -webkit-animation-name: throb;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-duration: 10s;
  -moz-animation-name:...

JavaScript

var degrees = 0;
var card2 = document.querySelector('.card2');
function rotate() {
    card2.style.webkitTransform = "rotateZ("+ (degrees++) + "deg)";
    card2.style.mozTransform = "rotateZ("+ (degrees++) + "deg)";
    window.setTimeout(rotate, 33);
}
rotate();

window.setTimeout(function(){
    alert('UI Thread Locked!');
}, 1000);