CODEWITHSUNDEEP
csssyntaxcss-transitions
luke
luke

Reputation: 362

How to add a CSS transition while keeping previously declared transitions

Say we got an element which has a transition. How can one add a class with a transition for another transition property without overwriting and so disabling the other transition?

Example

HTML:

<div class="foo bar">
  Lorem ipsum dolor sit amet …
</div>

CSS:

.foo {
  transition: background-color 1s ease-in-out;
}

.bar {
  transition: box-shadow 0.5s linear;
  /* This of course overwrites .foo */
}

Upvotes: 3

Views: 370

Answers (2)

Paulie_D
Paulie_D

Reputation: 114990

Basically, you can't. You would have to write a new selector .foo.bar with both transitions stated. – 

.foo {
  transition: background-color 1s ease-in-out;
}

.bar {
  transition: box-shadow 0.5s linear;
}

.foo.bar {
  transition: background-color 1s ease-in-out, box-shadow 0.5s linear;
}

Upvotes: 3

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

Like you would do with any other CSS property, redeclare.

.foo {
  transition: background-color 1s ease-in-out;
}

.bar {
  transition: background-color 1s ease-in-out, box-shadow 0.5s linear;
}

Upvotes: -1

Related Questions