Opacity Transition on pseudo element in all browsers not working…but…!!!

[fooman]

I have an element that I am setting opacity to it’s :before element using a transition.
I am using SCSS for my css.

Here’s a codepen dealie

I’ve read on Google that Chrome didn’t support transitions on pseudo elements at one time, but was fixed up awhile ago. I’m using Chrome v 30.x
I also tried it out on Firefox and Safari with no luck.

Now, the weird part!
If I open up dev tools and set the item to :hover, I can deselect the “opacity” style in the :before element. When I do this, the transition happens! I can’t figure out why it happens when I manually do this but not when I try it through the CSS.

Any ideas and flaming of how I’m doing this is welcome! :)

[paulob]

Hi,

You have no generated content for the initial state so opacity doesn’t get animated.

e.g. content:” “;

.placeholder:before {
content:” “;
opacity: 0;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}

[paulob]

Just to rephrase @paulob‘s answer because it’s a little unclear:

Sorry, it was a bit of a short explanation wasn’t it :)

[fooman]

Wow… I can’t believe I didn’t pick up on this :(
Thank you tons for the help!

Cheers guys!

[Author]

Posts