JSFiddle - React, Tailwind, and code Playground

by tucado

HTML

<div class="content">
        . <br/>. <br/>. <br/>. <br/>
    </div>

CSS

body {
            background: #ffffff url('http://www.itgeared.com/images/content/1481-1.jpg') no-repeat top;
            background-attachment: fixed; 
            animation: filter-animation 8s;
            -webkit-animation: filter-animation 8s;            
        }    
        .content {height:2000px;}
        
@keyframes filter-animation {
  0% ,75%{
     filter: grayscale(1);
   }
    
   100% {
     filter: grayscale(0);
   }
 
 }
 
 
 @-webkit-keyframes filter-animation {
   0%, 75% {
     -webkit-filter: grayscale(1);
   }
   
   100% {
     -webkit-filter: grayscale(0);
   }
 
 }