JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div class="black cssTransitions" id="benqus"></div>

<div class="black cssTransitions" id="aaron"></div>
<button id="btn1">Start</button>

<div class="black" id="aaron2"></div>
<button id="btn2">Start</button>

CSS

div.black {
    width: 200px;
    height: 200px;
    background-color: black;
}

.cssTransitions {
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}

.fadeInOutAnim {
    opacity:0;
    
  -webkit-animation: fadeInOut 1s ease-in-out 1 normal; /* Safari 5, Chrome */
     -moz-animation: fadeInOut 1s ease-in-out 1 normal; /* Firefox 5-15 */
       -o-animation: fadeInOut 1s ease-in-out 1 normal; /* Opera 12+ */
          animation: fadeInOut 1s ease-in-out 1 normal; /* Safari 5, Chrome, Firefox 16+ */
}
        
@-webkit-keyframes fadeInOut {
  0%   { opacity: 0.0; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.0; }
}
@-moz-keyframes fadeInOut {
  0%   { opacity: 0.0; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.0; }
}
@-o-keyframes fadeInOut {
  0%   { opacity: 0.0; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.0; }
}
@keyframes fadeInOut {
  0%   { opacity: 0.0; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.0; }
}

JavaScript

$('#benqus') // Opacity is 100%
    .hide() // Instant hide... Display none... Opacity is 100%
    .fadeIn(1000) // Display block... Opacity set to 0... then a timer starts to change the anim to 100..
                  // CSS starts to animate the change to 0, at the same time jQ is animating it back to 100
                  // the effect is a half fade out.. then fade back to 100.
                  // Due to when the fadeOut is called you never really see the 100% here though...
    .fadeOut(1000);
                  // jQ animates this back down to 0 and then displays none


$('#btn1').on('click',function(){
    $('#aaron')
        // Use modernizr to see if transitions are supported?
        .removeClass('cssTransitions')
        
        // To then run this section
        .hide()
        .fadeIn(1000)
        .fadeOut(1000);
    
        
});

// Or just setup your animation in pure CSS3 and stigger it with a class change?
$('#btn2').on('click',function(){
    $('#aaron2')
        .toggleClass("fadeInOutAnim");
});