JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="magenta">
  <div class="skyblue">

  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.magenta {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid magenta;
  &.in {
    animation-delay: .3s;
    animation-duration: 1000ms;
    animation-name: magenta;
  }
  .skyblue {
    border: 1px solid skyblue;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    position: absolute;
    animation-delay: .3s;
    animation-duration: 500ms;
    animation-name: rotate;
    animation-direction: reverse;
    &.in {
      animation-delay: .5s, .3s;
      animation-duration: 2000ms, 500ms;
      animation-name: skyblue, rotate;
    }
  }
}

@keyframes magenta {
  0% {
    border: 1px solid magenta;
    transform: rotate(45deg);
  }
  50% {
    border: 1px solid green;
  }
  100% {
    border: 1px solid skyblue;
  }
}

@keyframes skyblue {
  0% {
    border: 1px solid skyblue;
  }
  50% {
    border: 1px solid yellow;
  }
  100% {
    border: 1px solid magenta;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript

$('div').on('click', function() {
  $(this).toggleClass('in');
});