Is there a way to combine multiple "transition" rules?

Question

I'd like to have CSS lightweight classes which mean one thing each. So I wanted to have one class which said that an item is getting higher when mouse is over it, and the other which said that item should become invisible if parent is not active. The problem is that each of this aspects should be animated, so I defined transition: height 1s in first class and transition: opacity 2s in the other.

Here is a simplified version of my attempt, this seems to do something entirely different than I expected: rules do not merge, but merely override each other.

.active_only {
  opacity: 0;
  transition: opacity 1s;
}
.activator:hover .active_only {
  opacity: 1;
}
.elastic {
  height: 20px;
  transition: height 2s;
}
.elastic:hover {
  height: 40px;
}
li {
  border: 1px solid red;
}

<div class="activator">
  Here's a magic list
  <ul>
    <li class="elastic active_only">item one
      <li class="elastic active_only">item two
  </ul>
</div>

How can I apply several transition rules on the same element ?

Answer 1

The transitions are declared on the same elements so even if you use different classes to declare them, the transition property is overriden by the second transition declaration.

You can transition several properties like height and opacity if you declare them in one declaration seperated by a comma using this syntax (check w3.org for reference) :

transition: opacity 1s, height 2s;

Your code should look like this :

.active_only {
    opacity:0;
    transition:opacity 1s, height 2s;
}
.activator:hover .active_only {
    opacity:1;
}
.elastic {
    height:20px;
}
.elastic:hover {
    height:40px;
}
li {
    border:1px solid red;
}

<div class="activator">Here's a magic list
    <ul>
        <li class="elastic active_only">item one</li>
        <li class="elastic active_only">item two</li>
    </ul>
</div>

Answer 2

You can do it either using all for making all properties that are changing to have transition or by using comma separated values if you want only selected (but multiple) properties to have transition.

.active_only {
    opacity: 0;
    -webkit-transition: height 1s, opacity 1s;
    -moz-transition: height 1s, opacity 1s;
    transition: height 1s, opacity 1s;
}

or

.active_only {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.active_only {
  opacity: 0;
  -webkit-transition: height 1s, opacity 1s;
  -moz-transition: height 1s, opacity 1s;
  transition: height 1s, opacity 1s;
}
.activator:hover .active_only {
  opacity: 1;
}
.elastic {
  height: 20px;
}
.elastic:hover {
  height: 40px;
}
li {
  border: 1px solid red;
}

<div class="activator">
  Here's a magic list
  <ul>
    <li class="elastic active_only">item one</li>
    <li class="elastic active_only">item two</li>
  </ul>
</div>

Using CSS Transitions - MDN Guide