JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="master">
  this is a test
</div>

SCSS

.master  {
  width: 30px * 16;
  height: 30px * 9;
  background:grey;
  position: relative;
  overflow:hidden;

  &:before {
    content: '';
    display: block;
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00bcf2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.2s;
    opacity: 0;
    font-size: 130px;
    color:white;
    pointer-events: none;
    transform: scale(1) rotate(0);
  }

  &.active {
    &:before {
      animation: numbers 3.5s ;
      /* opacity: 0; */
    }


  }

}


@keyframes numbers {
  0% {
    content: '';
    opacity: 0;
    transform: scale(1) rotate(0);

  }
  20% {
    content: '3';
    opacity: 1;
    transform: scale(1) rotate(0);

  }
  40% {
    content: '2';
    opacity: 1;
    transform: scale(1) rotate(0);

  }
  60% {
    content: '1';
    opacity: 1;
    transform: scale(1) rotate(0);

  }
  80% {
    content: 'Go!';
    opacity: 1;
    transform: scale(1) rotate(0);

  }
  100% {
    content: '';
    opacity: 0;
    transform: scale(3) rotate(-40deg);

  }
}

JavaScript

var master = document.querySelector('.master');

master.addEventListener('click', function(e) {

  this.classList.add('active');
});