title: How to combine multiple "transition" rules?
body: <p>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 <code>transition: height 1s</code> in first class and <code>transition: opacity 2s</code> in the other.</p>
  <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="activator"&gt;
    Here's a magic list
    &lt;ul&gt;
      &lt;li class="elastic active_only"&gt;item one
        &lt;li class="elastic active_only"&gt;item two
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>How can I apply several transition rules on the same element ?</strong></p>