How to add a CSS transition while keeping previously declared transitions

Question

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 */
}

Answer 1

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;
}