title: CSS transition properties on initial state or final state?
body: <p>I just read <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions</a>.</p>
  <p>There is a simple example as below:</p>
  <pre><code>&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>and CSS:</p>
  <pre><code>.box {
      border-style: solid;
      border-width: 1px;
      display: block;
      width: 100px;
      height: 100px;
      background-color: #0000FF;
      transition:width 2s, height 2s, background-color 2s, transform 2s;
  }
  .box:hover {
      background-color: #FFCCCC;
      width:200px;
      height:200px;
      transform:rotate(180deg);
  }
  </code></pre>
  <p>When moving mouse to hover the box, the transition is execute as expected, e.g from <code>.box</code> (initial state) to <code>.box:hover</code> (final state).
  However, when moving mouse out of the box, the transition is execute reversely, e.g from <code>.box:hover</code> to <code>.box</code>.</p>
  <p>My question is we set CSS transition properties on the initial state or the final state?
  Whether the specifications clarify this issue?</p>