Alko Alko - 3 months ago 14
CSS Question

Css disable background image animation

I have created simple button that uses 2 background images for normal and hover state. The problem is that every browser I have tested animates images on hover, something like slide up/down. I have removed every single css file linked order to eliminate the problem, but no luck

If I do something like :

* {

/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}


The problem is gone, but I still want to be able to use transitions and animations on certain elements. Is there a way to disable transitions for background images only?

Answer
.no-animate {
/*CSS transitions*/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/*CSS transforms*/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/*CSS animations*/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}

Apply that class to any item you want to disable transitions for. Don't use it on elements that have a background-image tranisition.

Comments