CSS Transitions is a great tool, but it's not easy to achieve its flexibility.

For example, there is an HTML element with a default transparency value equal to one.

Assigning transition-property: opacity and transition-duration: .5s to it

But what if you need to instantly hide an element, and then smoothly show it?

 .elem { width:200px; height:100px; background:#333; transition:opacity .5s; } .elem:hover { opacity:0; } 
 <div id="elem" class="elem"></div>

    1 answer 1

    While thinking about the logic of what is happening, the answer came himself, but still decided to publish, suddenly someone will come in handy. The solution was to separate the transition properties, which makes it possible to flexibly manipulate them (properties), for example, to change only them in the added class (or pseudo-class, as in the example).

     .elem { width:200px; height:100px; background:#333; transition-property:opacity; transition-duration:.5s; } .elem:hover { transition-duration:0s; opacity:0; } 
     <div id="elem" class="elem"></div>