CODEWITHSUNDEEP
csscss-transitions
Alko
Alko

Reputation: 1439

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?

Upvotes: 1

Views: 3399

Answers (1)

Nicholas Koskowski
Nicholas Koskowski

Reputation: 849

.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.

Upvotes: 2

Related Questions