CSS3 animation with gradients [duplicate]

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
– albuvee, Commented Apr 13, 2011 at 19:55
I think it does not work with gradients, even with new syntax — RobertO
– RobertO, Commented Apr 13, 2011 at 20:40
I just learnt this the hard way! transitions on a linear gradient do not work yet — iancrowther
– iancrowther, Commented May 23, 2011 at 13:08
transitions doesn't but transforms do, so you can translate/rotate/skew them around at least ie codepen.io/philipphilip/pen/OvXEaV — philip
– philip, Commented Mar 16, 2018 at 7:20

Michael Mullany · Accepted Answer · 2014-04-17 15:19:26Z

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, 2014 at 15:19

answered Apr 13, 2011 at 21:39

Michael Mullany

32.1k6 gold badges84 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lea Verou Over a year ago

It's in the spec for the new syntax though, not proprietary -webkit-gradient() crap.

Michael Mullany Over a year ago

AFAIK there's no support for gradient transitions anywhere yet - even the ones that support the new syntax.

Michael Mullany Over a year ago

BTW, if you're willing to go SVG - then gradient transitions are just dandy - as long as you're on a recent browser. See srufaculty.sru.edu/david.dailey/svg/Stwelve.svg

Brian Ephraim · Accepted Answer · 2012-03-14 02:21:21Z

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, 2012 at 2:21

Brian Ephraim

1271 silver badge3 bronze badges

2 Comments

albuvee Over a year ago

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.

dmackerman Over a year ago

Really clever solution here.

azizarslan · Accepted Answer · 2013-07-11 15:24:45Z

6

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

answered Jul 11, 2013 at 15:24

azizarslan

1543 silver badges3 bronze badges

1 Comment

RNickMcCandless Over a year ago

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.

Shawson · Accepted Answer · 2011-04-18 07:44:55Z

1

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/

answered Apr 18, 2011 at 7:44

Shawson

2,0682 gold badges28 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 13, 2014 at 23:59

Angelo Wellens

111 bronze badge

Comments

mindfullsilence · Accepted Answer · 2012-10-22 18:44:48Z

0

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

edited Oct 22, 2012 at 18:44

answered Oct 22, 2012 at 18:34

mindfullsilence

535 bronze badges

Collectives™ on Stack Overflow

CSS3 animation with gradients [duplicate]

6 Answers 6

3 Comments

2 Comments

CSS:

1 Comment

Comments

CSS:

Comments

HTML:

CSS:

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

CSS:

1 Comment

Comments

CSS:

Comments

HTML:

CSS:

Comments

Linked

Related