title: Apply CSS3 transition on change of a different property
body: <p>I know with CSS3 transitions you can tell it to slowly apply a change to a property when it's changed. I'm wondering if there's a way to do the same thing, but when a different property is changed.</p>
  
  <p>For example, the classic tutorial example on hover:</p>
  
  <pre><code>-- CSS --
  #div1 { opacity: 0.2; transition: opacity 1s; }
  #div1:hover { opacity: 1; }
  
  -- HTML --
  &lt;div id="div1" style="width:200px;height:200px;background-color:#000;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What I'm hoping to do is apply opacity transformation like this, but when a different property is changed. Specifically, a separate library which I have no control over is showing/hiding an element the normal way, using javascript to set the <code>display</code> property. What I'd like to do is hook up to that change somehow to force it to fade in and out using <code>opacity</code>, without tapping in to the javascript that's making the call.</p>
  
  <p>Is there some CSS3 magic I can do to make this happen?</p>
  
  <p>(If you're wondering, it's using ASP.NET AJAX with all of its funky toolkits and extenders, so I can't really dig into their script - if it was regular jQuery or another simple javascript library making the calls, it would be much easier to work with).</p>