Question

I have a transition set up for links that makes a rounded background fade in when the links are hovered over. The transition works in firefox, chrome, and safari, but not in opera. I’m wondering if there’s any problem with the states (a:hover, a:active, etc) I’m applying the transition to that might be messing it up in Opera.

To be clear, the hover effect appears in Opera as it should, but doesn’t fade in.

a, a:active, a:visited, a:hover {
    -webkit-transition: background 200ms ease-in; 
    -moz-transition: background 200ms ease-in;
    -o-transition: background 200ms ease-in;
    -ms-transition: background 200ms ease-in;
    transition: background 200ms ease-in;
    text-decoration: none;
    padding: 0.15em;
    margin: -0.15em;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

a:hover {
    background: rgba(255,0,50,0.10);
}

I have a similar fade-in hover effect on some text items, applied in the same way, but the color, not the background, changes. Those transitions do work in Opera.

Thanks for any help you can give.

Answer 1

The only thing that occurs to me is that you are not stating your initial background color, so Opera doesn’t know how to interpolate between undefined and rgba(255,0,50,0.10). Try setting the background color to transparent black at first…

a, a:active, a:visited, a:hover {
  /*your current css*/
  background: rgba(0,0,0,0);
}