JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="newContent"><br />
<h1 align="center">Welcome Facebook Users!</h1>
</div>

CSS

#newContent {
  height:400px;
  font-family:sans-serif;
  background-image: -ms-linear-gradient(bottom, #a7cfdf 0%, #23538a 100%);
  background-image: -moz-linear-gradient(bottom, #a7cfdf 0%, #23538a 100%);
  background-image: -o-linear-gradient(bottom, #a7cfdf 0%, #23538a 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a7cfdf), color-stop(100, #23538a));
  background-image: -webkit-linear-gradient(bottom, #a7cfdf 0%, #23538a 100%);
  background-image: linear-gradient(to top, #a7cfdf 0%, #23538a 100%);
}

.backgroundAnimated{
        background-color: #ffffff !important;
        background-image:none !important;
        -webkit-transition: background-color 5000ms linear;
        -moz-transition: background-color 5000ms linear;
        -o-transition: background-color 5000ms linear;
        -ms-transition: background-color 5000ms linear;
        transition: background-color 5000ms linear;
        -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
        animation-direction: alternate;
        -webkit-animation-iteration-count: 4; /* Chrome, Safari, Opera */
        animation-iteration-count: 4;
}

JavaScript

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
});

function fadeItIn(){
  $('#newContent').addClass('backgroundAnimated');
}
var fadeIn = setTimeout(fadeItIn, 2500);