A Pen by Kiran.

Gradient-background-animation-(hack).markdown

Gradient background animation (hack)

I've found no way to animate gradient backgrounds, so this is a cheap way of doing so by animating the opacity of a div on top (in this case on top of the whole body, but you'd just set it to match dimensions of whatever object you want)

A Pen by Kiran on CodePen.

License.

index.html

<div id="blackOut"></div>

script.js

//demo("blue","yellow");  //call the demo function
//demo("yellow","green");  //call the demo function
demo("yellow","blue");  //call the demo function


//A demo function - shows one colour first then switches to another
function demo(firstClass,secondClass)
{
  $("body").addClass(firstClass);  
  window.setTimeout(function(){
  changeGradient("body", firstClass,secondClass, 2000);  
  },1000);
}


//The important function, actually fades in another gradient
function changeGradient(object, oldClass, newClass, t)
{  
  
  $("#blackOut").addClass(newClass);      //Adds the new colour to temporary blackout div
  $("#blackOut").animate({opacity:1},t);  //Animate the blackout div opacity to 1
 
  
  //To match time when blackout is complete
  window.setTimeout(function()
  {
    $(object).removeClass(oldClass);      //Remove old colour from object
    $(object).addClass(newClass);         //Add new colour to object
    $("#blackOut").css({opacity:0});      //Hide blackout ready for another change
  },t);
  
}

style.scss

@import "compass";
body, html
{
  height:100%; 
  //@extend .blue;  //using this applies the blue radial straight away
  margin:0;
  
}


@mixin radial($startColor, $endColor) 
{
    background: $startColor;    
    background: -webkit-radial-gradient(center, ellipse cover, $startColor 0%, $endColor 100%);    
	
}

.blue   {@include radial(#499FCD, #1A69AA); }
.yellow {@include radial(#CD9F49, #AA691A); }
.green  {@include radial(#9FCD49, #69AA1A); }
.pink   {@include radial(#CD499F, #AA1A69); }

 
#blackOut
{
  height:100%;
  width:100%;
  
  margin:0;
  opacity:0;
  position:absolute;
  padding:0;
}