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.

score 3 · Accepted Answer · answered Dec 07 '12 at 13:57

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 07 '12 at 13:57

Sven Bieder

5,515
2
21
27

thanks! Ok, so I can't do any animation with gradient color? There is no any other solutin? – Nave Tseva Dec 07 '12 at 13:58
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. – Sven Bieder Dec 07 '12 at 14:00
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!) – Nave Tseva Dec 07 '12 at 14:03
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. – Sven Bieder Dec 07 '12 at 14:06
Ok, Thank you veru much! you really helped me! – Nave Tseva Dec 07 '12 at 14:08

Animation in css with gradient colors

1 Answers1

Linked