Efeito transição com CSS3

 Novamente eu Sekaii (Lord Seven) trago o tutorial de um novo efeito de transição em CSS3, parecido com aqueles usados em link, veja uma demonstração abaixo:

UpTutoriais - Designer de verdade!

Muito bem, para colocar esse efeito em seu site/blog basta ir em:

Painel > layout > adicionar um gadget > HTML/ Java Script ou uma postagem > HTML > cole o código abaixo

<style> div#facil {margin:auto; color: #xxxxxx; background:#XXXXXX; width:100px; height:100px; transition:all 5s; -moz-transition:all 5s;
-o-transition:all 5s; -webkit-transition:all 5s;} div#facil:hover {background: #XXXXXX; width:450px;} </style>

<div id="facil">SEU TEXTO</div>

MEXENDO NO CÓDIGO:
Para alterar o cor do background, altere os trechos em vermelho, para alterar a cor do texto altere os trecho em azul.
Para alterar a parte de transição (velocidade, tamanho e tamanho da transição) altere os seguintes trechos:

Trecho sem efeito (verde):
Width:100px; Largura do espaço sem transição
Height:100px; Altura do espaço sem transição
Color: #XXXXXX; Cor do texto;

Trecho em efeito Hover (cor roxa); 
width:450px; | largura do espaço na transição (hover)