Adding transition to a different property

css, css-transitions

Solution

Unfortunately it's not possible to "extend" a property in another rule in CSS, no matter if it's a `transition` or another property. Some alternatives may be:

Creating a rule for the combination of the classes

.class1.class2 {transition:background-color 0.4s, top 1s;}

The cons are that you have to create such rule for each of the relevant combinations. This also means code duplication.

Changing the html to eliminate the need to combine the rules

Find a proper way of representing the html objects so you won't need to extend the rules. In my case it's:

<div class="class2">
  <div class="class1">
</div>

The cons are a bit more complicated html. On the other hand you avoid duplicate code, and make your css more reusable.

Problem

I have an element with two classes: ``` <div class="class1 class2"></div> .class1 {transition: background-color 0.4s;} .class2 {transition: top 1s;} ``` The problem is that the transition of `class2` overwrites the transition of `class1`. I can't use `.class2 {transition: all 1s}` because the transition duration must be different. I also don't want to duplicate the code from `class1` to `class2` because `class2` can be applied to other elements as well. Is there a way to add transitions to an element without overwriting existing ones?

Original source