CSS3 animation twitch bug on opacity fade

To fix the twitching that happens during CSS3 animations such as fade, oddly enough, just set the backface-visiblity property to hidden.

Works like a champ.

SCSS

.my-hover {
@include single-transition(opacity, .3s, linear, 0s);
@include backface-visiblity(hidden);

&:hover {
opacity: .9;
}
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s