CSS Transitions Not Working?

Question

What I'm trying to do here is get a transition when this div is hovered over.

Everything works fine, its just the transition that does nothing. I've tried using the transition properties with transition: all, transition: opacity and transition: background. But none of them work.

It's the display property that's doing it. Because when I take that out, it works. How else can I get around this? Because I obviously want to keep the display property, as it works on all browsers, young and old.

Here's what I've got at the moment:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: none;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    display: block;
    background: rgba(0,0,0,0.5);
}

I don't mind if I'm using opacity or background or whatever to control the fading, I just don't know what else to do.

can you set opacity settings? there are browser specific settings "-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; " then "filter: alpha(opacity=50);" and " -moz-opacity:0.5;" and then "-khtml-opacity: 0.5;" lastly css3 "opacity: 0.5;" — Piotr Kula, May 10 '11 at 14:04
I'd prefer a method allowing me to keep the `display` property, but if that's the only way then I'd have to do that I guess. — Rowan, May 10 '11 at 14:06
But to be honest using a 2x2 semitransparent png would be better from experience. Dont use 1x1 IE7 freeks out. — Piotr Kula, May 10 '11 at 14:06
That modifies the opacity of the element, in his stylesheet he's only modifying the opacity of the background color. — scurker, May 10 '11 at 14:07
yoi can still use the dispaly:block in both situations. @scurker.. yea i see that now. — Piotr Kula, May 10 '11 at 14:08
That would be my oversight there, in not realising that the text wouldn't fade too. I'm giving this solution a go now, but is there anything else I could try that would keep the `display` property? — Rowan, May 10 '11 at 14:08
`.matrix-overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; transition: opacity 0.2s ease 0s; } a:hover .matrix-overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; }` — Rowan, May 10 '11 at 14:40
Thanks for this, both of you. For reference the post above is what I did in the end. — Rowan, May 10 '11 at 14:40

score 5 · Answer 1 · edited May 23 '17 at 12:01

Looks like the display property isn't supported with CSS transitions (also see this SO question).

With that in mind, you have several options. You could initially set the width/height to 0 in your pre-transition, or offset the element off the page (something like margin-left: -9999px;), or set the opacity to 0.

In your case, I would probably use this:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: block;
    margin-left: -9999px; /* hide element off the page */
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    margin-left: 0; /* reset element position */
    background: rgba(0,0,0,0.5);
}

score 3 · Accepted Answer · answered May 16 '11 at 18:34

Here's what I ended up doing:

    .matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.15s ease 0s;
    -o-transition: opacity 0.15s ease 0s;
    -moz-transition: opacity 0.15s ease 0s;
    transition: opacity 0.15s ease 0s;
}

score 0 · Answer 3 · edited Aug 09 '13 at 21:26

You can try the following:

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    pointer-events:none;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    pointer-events:auto;
    opacity: 1;
    transition: opacity 0.15s ease 0s;
}

Using pointer-events:none and opacity:0 together will have nearly the same effect as display:none, but now the transition should work fine.

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

you could use clip instead of display, as the element is absolutely positioned

Working Example

e.g.

.matrix-overlay {
    ...other properties, not display ...
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    ..other properties, not display ...
     clip: rect(auto); /* IE7 */
     clip: auto;
}

I put in the quirky IE7 code clip code for information, although IE doesn't do transitions anyway and you could feed it the display codes if you wanted to, but this way keeps them the same ;)

CSS Transitions Not Working?

4 Answers4

Working Example