How to change body's background for a linear gradient using a fade in effect

Question

I'm trying to get the body's background to change onload for a linear gradient onload event.

I have done this by far:

$(document).ready(function (){
  $("body").addClass("bc");
});

    /*CSS*/
    .bc{
        transition: background 1s;
        background: red; /*This actually gets the fade in animation effect*/
        /*background: linear-gradient(30deg, red, yellow) This doesn't get the effect*/
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I also tried to use Keyframes to change the background for a linear gradient but it changes it sharply

Answer 1

Here you have an example with keyframes animation:

$(document).ready(function (){
      $("body").addClass("bc");
});

/*CSS*/
@-webkit-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes GradientAnimation { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.bc{
  background-color: red;
  background: linear-gradient(270deg, #e4cc08, #e45708);
  background-size: 400% 400%;

  -webkit-animation: GradientAnimation 15s ease infinite;
  -moz-animation: GradientAnimation 15s ease infinite;
  -o-animation: GradientAnimation 15s ease infinite;
  animation: GradientAnimation 15s ease infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

And nice generator for this here: https://www.gradient-animator.com/

Answer 2

Since you cannot add transition on linear-gradient, you may use pseudo element that you make fading and you can easily adjust it's background and also the background of the body to create the needed effect:

setTimeout(function() {
  $('body').addClass('bc')
}, 500); /*Control the start of fading here */

/*CSS*/

body {
  transition: background 5s;
  background:linear-gradient(60deg, yellow, red);
  height:100vh;
  margin:0;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 3s; /* control the speed of fading here*/
  background: linear-gradient(30deg, red, pink)
}

body.bc:before {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

CSS transition works, but it lays an overlay over background. If you have text, which is placed above background, it will be overlaid.

i wrote a solution with jQuery, where you can define colors and order in which they would be changed from one to another:

in the example below, the animation goes from green to purple, and then back to green, and so on, until the animation stops after defined number of seconds

var stopAfterSec = 23;
var speed = 15;

var purple = [255, 26, 26];
var green = [26, 255, 118];
var sea_green = [26, 255, 244];

var order = [green, sea_green, purple];

var current = 0;
var direction = -1;
var color = end_color = order[current];

function updateGradient() {
  if (color[0] == end_color[0] && color[1] == end_color[1] && color[2] == end_color[2]) {
    direction = (current > 0 && current < order.length - 1) ? direction : (-1) * Math.sign(direction);
    current += direction;
    end_color = order[current];
  }

  $('.animGradientEfron').css({
    background: "-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 0.48) 100%)"
  });
  for (var i = 0; i <= 2; i++) {
    if (color[i] != end_color[i]) {
      color[i] += Math.sign((end_color[i] - color[i]));
    }
  }
}

jQuery(document).ready(function() {
  var startGradientAnimation = setInterval(updateGradient, speed);

  setTimeout(function() {
    clearInterval(startGradientAnimation);
  }, stopAfterSec * 1000);

});

.animGradientEfron {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 100%;
  height: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animGradientEfron"></div>

Answer 4

please refer it

 .css {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat;
 height: 200px;

 }
 <div class="css"></div>

Use css gradient over background image