JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//rawgithub.com/chemerisuk/better-dom/v1.6.6/dist/better-dom.js"></script>
<div class="opacity-div">Opacity animation</div>
<div class="slide-div">Slide animation</div>
<div class="transform-div">Transform animation</div>

CSS

body {
    font-size: 2em;
    line-height: 3;
}

.opacity-div {
    opacity: 1;
    background: red;
    
    -webkit-transition: opacity 2s;
    transition: opacity 2s;
}

.opacity-div[aria-hidden=true] {
    opacity: 0;
}

.slide-div {
    max-height: 3em;
    background: yellow;
    overflow: hidden;
    
    -webkit-transition: max-height 2s;
    transition: max-height 2s;
}

.slide-div[aria-hidden=true] {
    max-height: 0;
}

.transform-div {
    background: green;
    -webkit-transform: rotate(0) scale(1,1);
    transform: rotate(0) scale(1,1);
    
    -webkit-transition: -webkit-transform 2s;
    transition: transform 2s;
}

.transform-div[aria-hidden=true] {
    -webkit-transform: rotate(360deg) scale(0,0);
    transform: rotate(360deg) scale(0,0);
}

JavaScript

var opacityDiv = DOM.find(".opacity-div"),
    slideDiv = DOM.find(".slide-div"),
    transformDiv = DOM.find(".transform-div");

// toggle visibility every 2 seconds (look at animation code in CSS) 
setInterval(function() { 
    opacityDiv.toggle(); 
    slideDiv.toggle();
    transformDiv.toggle();
}, 2000);