A CSS transition effect to mimic slowly expanding/contracting movie titles.

inflates.html

<style>
  hr {
    margin-top: 2em;
}
.inflate, .deflate {
    font-size: 4em;
          width: 50%;
    hideborder: solid thin red;
    text-align: center;
    margin-left: 25%;
     margin-top: 1em;
     transition: color 12s, tranform 12s;
  -webkit-transition: color 12s, -webkit-transform 12s;
}
.inflates:hover .deflate {
  transform-origin: center center;
  -webkit-transform-origin: center center;
  transform: scale(0.83,0.83);
  -webkit-transform: scale(0.83,0.83);
    color: red;
}
.inflates:hover .inflate {
  transform-origin: center center;
  -webkit-transform-origin: center center;
  transform: scale(1.2,1.2);
  -webkit-transform: scale(1.2,1.2);
    color: red;
}
h2.deflate {
    font-size: 4em;
}
</style>
<div class='inflates'>
    <h1 class='inflate'>Hello</h1>
    <hr />
    <h2 class='deflate'>World</h2>
</div>

See http://jsfiddle.net/mcamiano/Wzf8H/ for a working example.