So you want to add CSS transition to all properties in an element except one?
This can be easily achieved by adding extra transition rules in the same line.
Let’s get started.
The goal for this guide is to create a box.
This box will have height, width, border, background color defined.
I will make it that when a user hovers over the box the following properties will change:
All of those CSS properties will have a smooth transition except height.
And to spice it up a bit, I will add a 180 degree spin with CSS transform.
The markup is fairly simple.
All I’ve done is create a simple HTML div element with a class name of box.
Time for the fun part, the CSS code.
Here’s the initial CSS code for the box.
I have given the box a height and width of 300px.
I’ve also given the box a thick border with a coral color.
And the background color of the box is aqua.
On line 13 is where the magic happens.
I’ve given the box a transition property.
The transition property is saying to give all the properties for this box a smooth transition over a duration of 1 second.
Except make the height transition 0 milliseconds.
0 milliseconds will be a instantaneous change.
Also notice that you can add multiple CSS transition rules by adding a comma.
Now to make this transition take into effect, let’s add some CSS hover selector to the CSS code.
When the user hovers over the box the background color, border color, height will change, and the box will have a 180 degree spin to it.
If you want to animate or apply a smooth transition to all the CSS properties except one or many, just define in the transition CSS property that specific CSS property and give it a transition duration of 0 milliseconds.