JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div>Any kind of html elem: img, div...</div>

CSS

HTML {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

BODY {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

DIV {
  background: magenta;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: .5rem .75rem;
  transform: translate(-50%);
  transform-origin: center;
  /* 4 rotations */
  /* 4 2sec pauses */
  /* 8 keyframes total */
  /* 2sec rotation time example */
  /* 8*2sec is 16s for complete sequence */
  animation: rotate-pause 16s infinite;
}

/* rotate and pause key frames */
@keyframes rotate-pause {
  /* 0 seconds */
  0% {
    transform: translate(-50%) rotate(0deg);
  }
  /* 2 seconds */
  12.5% {
    transform: translate(-50%) rotate(90deg);
  }
  /* 4 seconds */
  25% {
    transform: translate(-50%) rotate(90deg);
  }
  /* 6 seconds */
  37.5% {
    transform: translate(-50%) rotate(180deg);
  }
  /* 8 seconds */
  50% {
    transform: translate(-50%) rotate(180deg);
  }
  /* 10 seconds */
  62.5% {
    transform: translate(-50%) rotate(270deg);
  }
  /* 12 seconds */
  75% {
    transform: translate(-50%) rotate(270deg);
  }
  /* 14 seconds */
  87.5% {
    transform: translate(-50%) rotate(360deg);
  }
  /* 16 seconds */
  100% {
    transform: translate(-50%) rotate(360deg);
  }
  /* reloop if animate set to infinite */
}