JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<a href="#" onclick="close1()"><div class="swirl-in-fwd" id="pop">
Close Me!
</div></a>

<a href="#" onclick="open1()">Open Me!</a>

CSS

.swirl-in-fwd {width:300px;height:300px;background-color:#eee;
	-webkit-animation: swirl-in-fwd 0.6s ease-out both;
	        animation: swirl-in-fwd 0.6s ease-out both;
}


@-webkit-keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}
@keyframes swirl-in-fwd {
  0% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.swirl-out-bck {width:300px;height:300px;background-color:#eee;
	-webkit-animation: swirl-out-bck 0.6s ease-in both;
	        animation: swirl-out-bck 0.6s ease-in both;
}

@-webkit-keyframes swirl-out-bck {
  0% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
}
@keyframes swirl-out-bck {
  0% {
    -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
    opacity: 0;
  }
}

JavaScript

function close1() {

document.getElementById("pop").className = "swirl-out-bck";

}

function open1() {

document.getElementById("pop").className = "swirl-in-fwd";

}