Webkit Support for Gradient Transitions

CSS transition with background gradient

This works for me as it should intended. A couple things, this will only work in google chrome if you want it to work in other browsers:

Here is a generator

Here is an explanation

edit

Sorry I didn't realize there was a transition property in there. After doing some googling and trying some stuff out on my own, it is pretty clear that transitions on background gradients isn't possible... yet.

Here is a good article on how to get it to work with a little bit of a hack

http://nimbupani.com/some-css-transition-hacks.html

Use CSS3 transitions with gradient backgrounds

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.

(There have been some browser releases that supported transitions on gradients (e.g IE10. I tested gradient transitions in 2016 in IE and they seemed to work at the time, but my test code no longer works.)

Update: October 2018
Gradient transitions with un-prefixed new syntax [e.g. radial-gradient(...)] now confirmed to work (again?) on Microsoft Edge 17.17134. I don't know when this was added. Still not working on latest Firefox & Chrome / Windows 10.

Update: December 2021
This is now possible in recent Chromium based browsers using the @property workaround (but is not working in Firefox). Please see @mahozad's answer below.

CSS3 animation with gradients

Transitions are not supported yet on webkit gradients. It's in the spec, but it doesn't work yet.

(p.s. if you're doing color transitions only - you may want to check out -webkit-filters - which do animate!)

Update: gradient transitions apparently do work in IE10+

css transition on background image gradient

It's not possible to have transitions on background gradients. But you can have a look at this link to make it work with "hacks": http://nimbupani.com/some-css-transition-hacks.html

You can also make it appear like it's changing by using the background-position shift: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Here is a similar question with more links and information btw: Use CSS3 transitions with gradient backgrounds

Animate linear-gradient compatible with all browsers

Full support fixed

base on your website I'm figure it out. You don't need to use linear-gradient, just add one more selector and change your all animation base on box-shadow.

For example:

Add :before selector and set full size (like the parent - .header). Your all animation calling insert to this selector to. Don't forget to top:-100%; for top shadowing start and z-index: -1; that set the :before content under the .header content.

.header:before {
    z-index: -1;
    content:"";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    animation: hac 4s linear infinite;
    -moz-animation: hac 4s linear infinite;
    -webkit-animation: hac 4s linear infinite;
}

box-shadow animation example:

blur-radius should be 50px like the parent height (.header)

0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }
30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }
70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }

And all together:

.header {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 50px;    vertical-align: middle;}
.header:before {    z-index: -1;    content:"";    position: absolute;    top: -100%;    left: 0;    width: 100%;    height: 100%;    animation: hac 4s linear infinite;    -moz-animation: hac 4s linear infinite;    -webkit-animation: hac 4s linear infinite;}
@-moz-keyframes hac {    0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }    30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }    70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }}
@-webkit-keyframes hac {    0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }    30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }    70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }}
@keyframes hac {    0%, 100% { box-shadow: 0 0 50px 0 rgba(255,81,93,0.8) }    30% { box-shadow: 0 0 50px 0 rgba(39,175,131,0.8) }    70% { box-shadow: 0 0 50px 0 rgba(199,130,207,0.8) }}

<div class="header"></div>

.h_grid_2:hover .gradient_c_grd_3{
    opacity: 1;
}

.h_grid_2:hover .gradient_c_grd_2 {
   opacity: 0;
}