Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable CSS transitions for a single style?

It's pretty easy to enable CSS transitions for a single style, but is it possible to disable them for a single style?

The usual method for single-style transitions is:

div
{
    transition: opacity 0.5s;
}

but what I'd like to do is set a global transition, then disable it for a single property. Maybe something like this?

div
{
    transition: 0.5s opacity 0s;
}

Is that possible in any way?

EDIT I don't want to disable ALL transitions for an element, I want to disable ONE transition for an element. i.e. I want all properties to transition EXCEPT opacity.

Here's a fiddle to demonstrate: http://jsfiddle.net/jakelauer/QSJXV/

like image 579
Jake Avatar asked Aug 14 '13 17:08

Jake


2 Answers

I solved this. Example here: http://jsfiddle.net/jakelauer/QSJXV/1/

It works exactly how I thought it should, except I was missing a comma. Correct code example:

transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
like image 82
Jake Avatar answered Sep 23 '22 11:09

Jake


It seems that you can emulate the needed behavior by setting a very short transition-duration for that one property (see fiddle):

transition: all 3s ease, background-color .01s linear;
like image 38
Ilya Streltsyn Avatar answered Sep 21 '22 11:09

Ilya Streltsyn