CSS3 animation with gradients

Question

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.

? … nothing happens if I run this animation on a element ( -webkit-animation: pulse 1s infinite; ) — albuvee, Apr 13 '11 at 19:55
I think it does not work with gradients, even with new syntax — RobertO, Apr 13 '11 at 20:40
I just learnt this the hard way! transitions on a linear gradient do not work yet — iancrowther, May 23 '11 at 13:08
transitions doesn't but transforms do, so you can translate/rotate/skew them around at least ie https://codepen.io/philipphilip/pen/OvXEaV — philip, Mar 16 '18 at 07:20

Michael Mullany · Accepted Answer · 2014-04-17T15:19:26.210

26

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+

edited Apr 17 '14 at 15:19

answered Apr 13 '11 at 21:39

Michael Mullany

30,283
6
81
105

2

It's in the spec for the *new* syntax though, not proprietary `-webkit-gradient()` crap. – Lea Verou Apr 14 '11 at 09:19
1

AFAIK there's no support for gradient transitions anywhere yet - even the ones that support the new syntax. – Michael Mullany Apr 14 '11 at 18:48
2

BTW, if you're willing to go SVG - then gradient transitions are just dandy - as long as you're on a recent browser. See http://srufaculty.sru.edu/david.dailey/svg/Stwelve.svg – Michael Mullany Nov 21 '11 at 18:22

score 9 · Answer 2 · answered Mar 14 '12 at 02:21

9

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/

answered Mar 14 '12 at 02:21

Brian Ephraim

127
1
3

That's indeed really clever — but you need additional elements only for styling (for me a no-go) and in most cases this is not possible because you relay on the gradient as a background of a element by its own. but thanks for this creative solution — right now this seems to be one of the only ways to animate — at least 'fake'-animate — a gradient. – albuvee Apr 10 '12 at 13:33
Really clever solution here. – dmackerman Mar 21 '13 at 14:35

score 6 · Answer 3 · answered Jul 11 '13 at 15:24

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;
}

Great work around. I got it to work in IE 10 & 11 too. It's good enough fallback (no smooth transition but hover works all the same) on IE 9 but earlier versions may require a compatibility fallback if IE 8 or earlier statement. — RNickMcCandless, Dec 30 '13 at 08:07

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

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);
}

score 1 · Answer 5 · answered Apr 18 '11 at 07:44

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/

mindfullsilence · Answer 6 · 2012-10-22T18:44:48.383

@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.

CSS3 animation with gradients

6 Answers6

CSS:

CSS:

HTML:

CSS:

Linked

Related