Geek asks and answers

Is the RGBA Background property not supported by CSS3 transitions?

I am trying to execute the following code, but I do not see any transition.

#menu .col_1 a{
    -webkit-transition: all .5s ease-out 0.1s;
    -moz-transition: all .5s ease-out 0.1s;
    -o-transition: all .5s ease-out 0.1s;
    transition: all .5s ease-out 0.1s;
}

#menu .col_1 a:hover{
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.5);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Am I messing up something or is this type of transition not supported? Guidance works correctly, I just don't see the transition.

+5
source share
1 answer

Background RGBA is supported by CSS3. You need to provide a background property for the initial state so that it changes in the hover state.

Here is the code you need:

#menu .col_1 a {
-webkit-transition: all .5s ease-out 0.1s;
-moz-transition: all .5s ease-out 0.1s;
-o-transition: all .5s ease-out 0.1s;
transition: all .5s ease-out 0.1s;
background-color: rgba(0,0,0,1);
color: red;
}

#menu .col_1 a:hover {
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.5);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

}

and the violin works with it if you need it: http://jsfiddle.net/TAMA2/

+13
source

More articles:


All Articles