Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages CSS Animations Keyframe Rules and Animation Properties

Diego Villaseñor
Diego Villaseñor
12,615 Points
Posted by Diego Villaseñor
Diego Villaseñor
12,615 Points

Transitions and animations between color gradients

Hey,

Just wondering if it is possible. So far I managed to kind of* animate a transition between a gradient and a solid color, but not between gradients, and I was quite baffled when trying to figure how to even do an animation between a color gradient and a solid color.

*As you can se, it doesn't work quite well:

.container {
    max-width: 1000px;
    max-height: 600px;
}

.box {
    width: 300px;
    height: 300px;
    background: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
    margin: 15% 1% 2% 30%;
    padding: 20px;
    position: absolute;
    -webkit-transition: 2s background ease-in;
}



.box:hover {
    background: red;
}
Diego Villaseñor
Diego Villaseñor
12,615 Points
Diego Villaseñor
Diego Villaseñor
12,615 Points

Oh I see why, background-image is not a property available for animations and transitions.

2 Answers

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

From what I'm reading, gradient transition aren't supported yet, except maybe in IE10 + (didn't check it out myself). I did find this hack, which works with transitioning the opacity. http://codepen.io/sashtown/pen/DfdHh

Diego Villaseñor
Diego Villaseñor
12,615 Points
Diego Villaseñor
Diego Villaseñor
12,615 Points

Thanks a lot Emma, it's a very nice solution, I'll have to play around with it!

In the meanwhile I figured out a way to fake an animation: a semitransparent gradient on top of a color animation.

http://codepen.io/videco/pen/dPZzOP