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 Transitions and Transforms Transitions: Part 2

Ehsan Raza
Ehsan Raza
263 Points
Posted by Ehsan Raza
Ehsan Raza
263 Points

Cannot use "transition-delay" for "transition-property" for background.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

.wrap{
    width: 800px;
    height: 500px;
    margin: 200px auto auto;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
}
.box{
    width: 300px;
    height: 200px;
    background: linear-gradient(to top, #124552, #ffffff, #124552);
    border-radius: 10px;
    border: 3px solid #094533;
    box-shadow: 0 0 20px rgba(0,0,0, 1);
    transition-property: background, margin;
    transition-duration: 1s, 0.6s;
    transition-timing-function: cubic-bezier(.5, -.5, .3, 1.3), ease;
    transition-delay: 1s, 0s;
}
.wrap:hover .box{
    background: linear-gradient(to top, #d2481e, #ffffff, #d2481e);
    margin-left: 62%;
}

2 Answers

Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points
Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points

Go back to your .box class selector and change 

    transition-property: background, margin;

to 

    transition-property: background, margin-left;

I ran that and it worked fine

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

That still didn't do it for me on Firefox 34.0.5.

I tried background-size and background-position as well. They work for moving the gradient, but not delay changing the color.

Ehsan Raza
Ehsan Raza
263 Points
Ehsan Raza
Ehsan Raza
263 Points

Yes it does not work i have tried it. But thanks for checking out both of you guys :)

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Animating gradients apparently only works in IE10+ (yeah, go figure ;-p). It's in the pipe for the spec but not official yet, as far as I'm aware.

You could try using SVGs with gradients and animate that way, I'm pretty sure that would work.