new youpy.css ?

違うよ。 CSS transitions だよ。

transitions

• https://gumroad.com/l/pwU

<style type="text/css">
 * {

  -moz-transition: all 10s; 
  -webkit-transition: all 10s;  
  -ms-transition: all 10s;  
  -o-transition: all 10s;  
  transition: all 10s;  
  border-radius:0;

}

*:hover {

  border-radius:50px;
  width:50px;
  height:50px;
  background:#f0f;
  position:absolute;
  top:0;
  left:0;
  -moz-transition: all 10s; 
  -webkit-transition: all 10s;  
  -ms-transition: all 10s;  
  -o-transition: all 10s;  
  transition: all 10s;  

font-size: 3000px !important;
border: 100px dotted #0f0;
}
</style>

youpy.css

• http://ma.la/tmp/youpy.css

 *
{
border: 1em solid #00ff00;
color: #00ff00;
text-indent: -700em;
position: absolute;
top: 0;
left: 0;
letter-spacing: -0.9em;
background: #ff00ff;
}

*:hover,
*:focus
{
  display: block;
  float: right;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  color: #ffffff;
  width: 100%;
  height: 100%;
  font-size: 100%;
}

CSS transitions - MDN

CSSによりさらなる努力をせずに、上記の効果をスムーズにさせることができます。単に要素へトランジションを追加すると、変化がスムーズに発生するようになります:

p{
  padding-left:60px;
}
#foo{
  border-radius:50px;
  width:50px;
  height:50px;
  background:#c00;
  position:absolute;
  top:0;
  left:0;
  -moz-transition: all 1s; 
  -webkit-transition: all 1s;  
  -ms-transition: all 1s;  
  -o-transition: all 1s;  
  transition: all 1s;  
}