title: CSS3 one-way transition?
body: <p>Using CSS3 transitions, it's possible to have a 'smooth up' and 'smooth down' effect to whatever property. </p>
  
  <p>Can I have it setup to have only a 'smooth down' effect?  I'd like the solution to be in CSS only, avoiding JavaScript if possible.</p>
  
  <p>Logic flow:</p>
  
  <ul>
  <li>User clicks element  </li>
  <li>Transition takes 0.5s to change background color from white to black</li>
  <li>User lets go of the mouse left button</li>
  <li>Transition takes 0.5s to change background color from black to white</li>
  </ul>
  
  <p>What I want:</p>
  
  <ul>
  <li>User clicks element </li>
  <li>Transition takes 0s to change    </li>
  <li>User lets go of mouse button  </li>
  <li>Transition takes 0.5s to change...   </li>
  </ul>
  
  <p>There's no 'transition-in' time, but there's a 'transition-out' time.</p>