Change the linear gradient background after a while

Question

I want to change the background after a while. If the background has a “clear” color, there is no problem, but if the color is a gradient set, as the code does not work. is there any work for this?

background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Safari 5.1 to 6.0 */ background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1)); /*For Firefox 3.6 to 15 */ background: linear-gradient(rgba(39,49,67,1),rgba(51,90,109,1),rgba(83,142,144,1), rgba(226,228,209,1)); /*Standard syntax */ 

jsfiddle for normal color change

Answer 1

What Dbugger says is true, you cannot animate a background image with css animation.

However, you can fake it with a four-stop gradient (mentally position your color terminations). I suggest using a gradient generator, since Colorzilla or similar will make your work easier) - since the gradient is treated as a background-image , you can animate it using the background-position . To animate a position, you need to increase its size, so part of the gradient is outside your container.

You can use animation-delay to set the initial delay before the animation starts.

 html, body {width:100%;height:100%;margin:0;} div { width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(118,191,36,1) 25%, rgba(224,117,35,1) 50%, rgba(242,38,42,1) 75%, rgba(130,100,70,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(25%,rgba(118,191,36,1)), color-stop(50%,rgba(224,117,35,1)), color-stop(75%,rgba(242,38,42,1)), color-stop(100%,rgba(130,100,70,1))); background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%); background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%); background-size: 100% 400%; background-position:0 0; -webkit-animation: animateGradient 5s ease 1; -moz-animation: animateGradient 5s ease 1; animation: animateGradient 5s ease 1; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes animateGradient { 0% {background-position: 0 0;} 50% {background-position: 0 100%;} 100% {background-position: 0 0;} } @-moz-keyframes animateGradient { 0% {background-position: 0 0;} 50% {background-position: 0 100%;} 100% {background-position: 0 0;} } @keyframes animateGradient { 0% {background-position: 0 0;} 50% {background-position: 0 100%;} 100% {background-position: 0 0;} } 

 <div></div> 

---

Alternative: Another approach you can take is to overlay one element on another, set the initial gradient to the upper and final gradient in the lower element and create an opacity animation that will reduce the upper element after a certain amount of time ( opacity: 0 )

The following is an approach to how you can do this with a single markup element (rely on the :after or :before pseudo-element). The following approach has more compatible devices:

 html, body {width:100%;height:100%;margin:0;} .gradient { position:relative; width: 100%; height: 100%; background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1)); background: linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1)); } .gradient:after { content:""; position:absolute; top:0; left:0; width: 100%; height: 100%; background: -webkit-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); background: -o-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); background: -moz-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); background: linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); opacity: 0; -webkit-animation: animateGradient 3s linear 1; -moz-animation: animateGradient 3s linear 1; animation: animateGradient 3s linear 1; } @-webkit-keyframes animateGradient { 0% {opacity:1;} 100% {opacity:0;} } @-moz-keyframes animateGradient { 0% {opacity:1;} 100% {opacity:0;} } @keyframes animateGradient { 0% {opacity:1;} 100% {opacity:0;} } 

 <div class="gradient"></div> 

Answer 2

Gradient Animations

CSS3 does not support linear gradient animation, so to achieve this effect you will have to write the animation yourself in Javascript or use a background position trick like the one specified by Easwee. I prefer Javascript because it allows you to easily reuse code, add dynamic effects and quickly change the effect. This suggests that the Easwee solution is truly inventive, although it somewhat limits it.

CSS Gradient Animation:

Although CSS does not support gradient animation, as Easwee says, we can use the hack to create gradient animation in css by manipulating the background position of the image.

Example (Go full screen):

 body { margin: 20px; background-color: #000; } .container { position: relative; margin: 0 auto; width: 480px; height: 140px; background-color: #333; border-radius: 8px; } button { position: absolute; width: 160px; height: 36px; top: calc(50% - 18px); left: 50px; border: solid 1px #ccc; border-radius: 8px; color: #fff; font: 16px sans-serif; /* set up background gradient and animation */ background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } .container:hover button { /* shift background gradient position */ background-position: 0 0; } .slider { position: absolute; top: calc(50% - 18px); right: 50px; margin-top: -36px; width: 160px; height: 72px; background-image: linear-gradient(#5187c4, #1c2f45); transition: margin-top .5s; } .container:hover .slider { margin-top: 0px; } .frame { position: absolute; top: calc(50% - 18px); right: 50px; box-sizing: border-box; width: 160px; height: 36px; border: solid 1px #ccc; border-radius: 8px; } .info { margin: 20px auto 0; color: #ccc; font: 18px/150% sans-serif; text-align: justify; width: 480px; } 

 <div class="container"> <button disabled>Some Button</button> <div class="slider"></div> <div class="frame"></div> </div> <div class="info"> You can't animate gradient colors with pure CSS. Gradients are set via background-image, which is not (currently) an animatable property. But background-position is. So you can use background-size to make the background taller than the element it on, then animate background-position to slide it up or down. The result is a simple animated fading gradient. </div> 

Link to link for code

Javascript Gradient Animation

To create a gradient animation based on Javascript, we need:

• Create a function that takes an element, a range of colors, a time delay between them, and a callback that starts after the function finishes (letting you do things like repeat it continuously or until the condition is met).
• Then use this function with an interval that fires 15 times per second and converts its current time into a progress value from 0 to 100 according to how it is completed.
• Then we multiply the color difference for each match of r, g, b by progress to get what stage of the transition we are currently at.
• Upon completion, we will move on to the next color.
• At the end of all this, we run a callback, so we can decide what to do.

(If you want the code solution to inform me, this is a long process for input, so for this reason, if you use only once and two, maybe three gradient colors use the Eawee solution. Otherwise, Javascript is your friend.)

The simplest example of a Javascript gradient animation:

 var colors = new Array( [62,35,255], [60,255,60], [255,35,98], [45,175,230], [255,0,255], [255,128,0]); var step = 0; //color table indices for: // current color left // next color left // current color right // next color right var colorIndices = [0,1,2,3]; //transition speed var gradientSpeed = 0.002; function updateGradient() { if ( $===undefined ) return; var c0_0 = colors[colorIndices[0]]; var c0_1 = colors[colorIndices[1]]; var c1_0 = colors[colorIndices[2]]; var c1_1 = colors[colorIndices[3]]; var istep = 1 - step; var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); var color1 = "rgb("+r1+","+g1+","+b1+")"; var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); var color2 = "rgb("+r2+","+g2+","+b2+")"; $('#gradient').css({ background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); step += gradientSpeed; if ( step >= 1 ) { step %= 1; colorIndices[0] = colorIndices[1]; colorIndices[2] = colorIndices[3]; //pick two new target color indices //do not pick the same as the current one colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length; } } setInterval(updateGradient,10); 

  body{ background-color: #000000; padding: 0px; margin: 0px; } #gradient { width: 100%; height: 800px; padding: 0px; margin: 0px; } 

 <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> </head> <body> <div id="gradient" /> </body> </html> 

Javascript Gradient Animator (Pen Pen)

Useful resources:

CSS Gradient Animator Generator

Flashing CSS gradient CSS

Answer 3

A background gradient is considered a background-image , and background images can NOT be animated using regular CSS transitions.

Answer 4

You can try LinearGradient.js to create random and colorful linear gradients.