CSS3 animation with gradients [duplicate]

Question

This question already has an answer here:

• Use CSS3 transitions with gradient backgrounds 15 answers

Is there really no way to animate a gradient-background with CSS?

something like:

@-webkit-keyframes pulse {
  0% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  50% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
  100% {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240)));
  }
}

I know, for Safari 5.1+ and Chrome 10+ there is a new gradient-syntax, but for now, I have to stick with the old one for this project.

Answer 1

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+

Answer 2

Put each gradient variation on it's own layer. Absolute position them. Give each it's own set of keyframes synchronized with each other. In those keyframes define opacity for each layer, at each keyframe, with 1 and 0 mixed around amongst keyframes.

Beware that the container's color will bleed through, so wrap the layers in a parent with a background of white.

http://jsfiddle.net/jSsZn/

Answer 3

I solved the problem via applicating :before attribution to the a tag.

Link: http://codepen.io/azizarslan/pen/xsoje

CSS:

nav ul#menu li a {
    display: block;
    position: relative;
    z-index: 1;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
}

nav ul#menu li a:before {
    width: 100%;
    height: 100%;
    display: block; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;

    /* webkit gradient background */
    background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));

    /* webkit transition */
    -webkit-transition: all 250ms linear;

    /* before hack */
    content: ".";
    text-indent: -99999px;
}

nav ul#menu li a:hover:before {
    opacity: 1;
}

Answer 4

You should check out css sandpaper- this lets you achieve animated gradients, but it's not a pure css solution. Css sandpaper takes care of cross-browser rendering of the gradient, and there's a piece of javascript which handles the animation.

http://www.useragentman.com/blog/2010/04/05/cross-browser-animated-css-transforms-even-in-ie/

Answer 5

@Brian instead of using new html elements, use sudo elements :before and :after. Position the main element as relative, then position the pseudo elements as absolute with 0 for top, left, right, and bottom.

HTML:

<div></div>

CSS:

div {
    width: 200px;
    height: 200px;
    position: relative;
}

div::before, div::after {
    display: block;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

Add your keyframes and gradients to the div and the pseudo elements using opacity. Use z-index to control which is on-top of which.

Answer 6

if you are looking for a transition of your text from a solid color to a gradient. Just animate the rgba color of the text to reveal the background gradient applied on it.

CSS:

.button {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,1);

    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.button:hover {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fe046e), color-stop(100%,#a02ed4));
    -webkit-background-clip: text;
    color: rgba(255,255,255,0);
}