oli

/* duplicating a :hover transition using animation */
article {border: 1px solid red; min-height: 100px;}
.transition {
  float: right;
  transition: all 250ms;
  margin-top: 20px;
  opacity: 0;
}
article:hover .transition {
  opacity: 1;

oli

/* Crossfade images by transitioning background-image */
/* tweaked from dabblet by Zee Agency mentioned in https://twitter.com/ChromiumDev/status/174568285822664704 */
div {
	width: 400px;
	height: 200px;
	background-image: url("http://lorempixel.com/400/200/animals/1/");
	background-repeat: no-repeat;
	transition: background-image 0.5s;
}
div:hover {

oli

<blockquote cite="https://twitter.com/aaronbassett/status/84037182196678658">
    <p>I had ice-cream tonight. It was awesome.</p>
    <footer itemscope itemtype="http://schema.org/Person">
        — <a href="https://twitter.com/aaronbassett" itemprop="url"><span itemprop="name">Aaron Bassett</span></a>
        on <cite><a href="https://twitter.com/aaronbassett/status/84037182196678658">Twitter</a></cite>
    </footer>
</blockquote>