CODEWITHSUNDEEP
csscss-transitionscss-animations
Buzu
Buzu

Reputation: 1098

Does Webkit CSS-Animate pseudo-elements?

I'm working on a new overlay screen technique for a site that I'm working on. I want to leverage animation to CSS because it is easier, and faster than JavaScript animations. I'm doing something simple, but I'm having trouble with webkit-based browsers like Chrome and Safari.

This is the code I'm using:

body:after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    opacity: 0;
}

body.dimmed:after {
    z-index: 9999;
    opacity: .7;
}

AS you can see, it uses the after pseudo-element, and based on the body class it animates it to a show it or hide it. It works well on Firefox, but not on Chrome or safari. On these browsers the animation does not happen, and the change is instantaneous, which is not what I want. If you apply the same CSS to the body, rather than the pseudo-element, the animation happens:

body {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    opacity: 0;
}

body.dimmed {
    z-index: 9999;
    opacity: .7;
}

This makes me think that transitions do not apply to pseudo-elements on Chrome. Should this be reported as a bug?

Upvotes: 0

Views: 1091

Answers (2)

kizu
kizu

Reputation: 43224

BTW, at the moment you could try to use this technique: http://kizu.ru/en/pseudos/ — by triggering the transition on the element itself and then inheriting the value to the pseudo-element. That won't work for every property (for opacity for example), but you could weork around with that using some imagination.

Upvotes: 0

ndm
ndm

Reputation: 60463

It's a known bug, known for years already:

https://bugs.webkit.org/show_bug.cgi?id=23209

http://code.google.com/p/chromium/issues/detail?id=54699

Upvotes: 1

Related Questions