JSFiddle - React, Tailwind, and code Playground
HTML
<div class="i1" style="font-size: 150px; text-align: center; height: 160px; background: red; width: 160px;">A</div>
<a href="#">animate</a>
CSS
.animated {
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
30% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-100deg);
transform: rotate(-100deg);
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(400deg);
transform: rotate(400deg) scale(0.5);
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
30% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-100deg);
-ms-transform: rotate(-100deg);
transform: rotate(-100deg);
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(400deg);
-ms-transform: rotate(400deg);
transform: rotate(400deg) scale(0.5);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
JavaScript
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('.i1')
.addClass('rotateOut animated')
.one('webkitAnimationEnd mozAnimationEnd ' +
'MSAnimationEnd oanimationend animationend',
function () {
$(this).removeClass();
});
});
});