CODEWITHSUNDEEP
animationcsscss-transitions
android.nick
android.nick

Reputation: 11197

CSS3 Transition: animating between 2 different gradients. incl jsfiddle

http://jsfiddle.net/nicktheandroid/PXdXr/1/

I would like to animate between 2 different gradients, have one fade in on hover. My example shows what should happen, but it happens instantly, i want it to fade between them.

Just for reference here on SO(this is all in the jsfiddle):

.outerBorder {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/

   background: #4d4d4d; /* Old browsers */
background: -moz-linear-gradient(top, #4d4d4d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4d4d4d 0%,#0e0e0e 100%); /* W3C */



-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;

}

.outerBorder:hover {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/

background: #d6f9ff; /* Old browsers */
background: -moz-linear-gradient(top, #d6f9ff 0%, #9ee8fa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6f9ff), color-stop(100%,#9ee8fa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6f9ff', endColorstr='#9ee8fa',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #d6f9ff 0%,#9ee8fa 100%); /* W3C */

}

.innerBox {
    width:300px;
    height:200px;
    margin:5px;
    background-color:#fff;
}

Upvotes: 2

Views: 3215

Answers (2)

methodofaction
methodofaction

Reputation: 72385

As Rick mentioned, there is no support for gradient animation yet.

However, you can still apply a semitransparent gradient on top of the CSS transition and then just animate the background color (the effect will be very similar):

.outerBorder {
    display:inline-block;
    /*border: 3px solid #4d4d4d;*/  
    -webkit-transition: background-color 1000ms ease-in-out;
    -moz-transition: background-color 1000ms ease-in-out;
    -o-transition: background-color 1000ms ease-in-out;
    transition: background-color 1000ms ease-in-out;
    background-color: #4d4d4d;
}

.outerBorder:hover {
    background-color: #b4d7dd; 
}

.innerBox {
    width:300px;
    height:200px;
    padding:15px;
    background-color:#fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255, 0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
   background: linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */
}

JSFiddle: http://jsfiddle.net/NAVYX/

Upvotes: 4

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

There isn't support for gradient animations yet. As you are using jQuery you could write this functionality using cssHooks, or simpler, have one gradient on top of the other, then animate the opacity to simulate the fade.

Upvotes: 1

Related Questions