Animation in css with gradient colors

Question

I have this CSS3 code:

#box2 {
    position: relative;
    width: 500px;
    border: 1px solid black;
    box-shadow: -3px 8px 34px #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 300px;
    top: 113px;
    text-align: justify;
    -webkit-transition: all 1s;
    font-size: large;
    color: Black;
    padding: 10px;
    background: #D0D0D0;
    opacity: 0;
}


@-webkit-keyframes mySecond {
    0% {
        right: 300px;
        top: 13px;
        background: #D0D0D0;
        opacity: 0;
    }

    100% {
        background: #909090;
        right: 300px;
        top: 63px;
        opacity: 1;
    }
}

#littlebox2 {
    top: 053px;
    position: absolute;
    display: inline-block;
}

.littlebox2sentence {
    font-size: large;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 10px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9CCEDA), to(#58A8D8));
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: background .25s ease-in-out;
    border-bottom: 2px solid red;
    border-right: 2px solid red;
    border-top: 2px solid red;
    -webkit-transition-property: color, background;
    -webkit-transition-duration: .25s, .25s;
    -webkit-transition-timing-function: linear, ease-in-out;
    color: #164ad7;
}

#bothcontainer2:hover ~ #box2 {
    -webkit-transition: all 0s;
    background: #909090;
    right: 300px;
    top: 63px;
    -webkit-animation: mySecond .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
}

#bothcontainer2:hover .littlebox2sentence {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B2DFE9), to(#83BEF1));
    color: black;

}

Live example here: http://jsfiddle.net/md966/3/

How can I do an animation with gradient color? If the colors were for example blue and red it works fine (the background color transition) but when I replace it with gradient color it doesn't work. I found some tutorials but they don't really helped me.

Sven Bieder · Accepted Answer · 2012-12-07 13:57:18Z

3

When using a gradient as background, you don't define a background-color. A gradient is a background-image. Background-image isn't a property that can get animated. So your approach can not work.

answered Dec 7, 2012 at 13:57

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

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

5 Comments

Nave Tseva Over a year ago

thanks! Ok, so I can't do any animation with gradient color? There is no any other solutin?

Sven Bieder Over a year ago

The only solution I see is using different layers of containers with different background-images absolute positioned and fade through this layers. But I wouldn't want to do that.

Nave Tseva Over a year ago

Thank you! So what your recommendation? use "regular" color with the effect or use gradien color without the effect? What do you think is better? (I would like to get an advice!)

Sven Bieder Over a year ago

That is a decision you must make on your own. It depends very much on the complete design of page and if the animation supports the visualization of an important process for the user. When it is just because it would be cool, then I would completely get rid of the animation.

Nave Tseva Over a year ago

Ok, Thank you veru much! you really helped me!

Collectives™ on Stack Overflow

Animation in css with gradient colors

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related