Fuente

HTML 1

<div id="recuadro1"> <h3>Recuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div> 

 HTML 2

<div id="recuadro2"> <h3>Recuadro 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, </p>
</div> 

CSS 1

<style type="text/css"> 

#recuadro1{
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

#recuadro1:hover{
  width:300px;
}

</style> 

CSS 2

<style type="text/css"> 

#recuadro2{
  border-radius: 20px;  
  background-color:#ff0;
  width:200px;
  padding:10px;
  transition:width 1s;
  -moz-transition:width 1s;
  -ms-transition:width 1s;
  -webkit-transition:width 1s;
  -o-transition:width 1s;
}

#recuadro2:hover{
  width:300px;
}

body {
  background:white;
  margin:50px;
}

</style> 

 

Original Hover

transition-timing-function
Define el ritmo de la transición: a saltos, lenta al principio y más rápida al final, etcétera. Resultará familiar a las personas que han trabajado con Flash, Premiere, After Efects o cualquier otro programa en el que se manejen keyframes. Los principales valores que puede tener son:
linear: lineal.
ease: lento al principio, luego rápido y finalmente lento.
ease-in: muy lento al principio y muy rápido al final.
ease-out: muy rápido al principio y muy lento al final.
ease-in-out: lento al principio, rápido entremedias y lento al final.
steps (nº): por pasos, entre paréntesis se indica el número de saltos que debe dar.
cubic-bezier (n,n,n,n): definiendo los puntos de una curva bleizer.

Sintaxis alternativa

Estos cuatro parámetros se pueden escribir también por separado:

a {
    transition-property: text-decoration;
    transition-duration: 0.8s;
    transition-timing-function: linear;
    transition-delay: 0.2s;
}

Cada parámetro es:

1. transition-poperty: propiedad a la que se le va a aplicar el efecto de transición. Cualquier propiedad CSS es válida: width, height, color, border, etc.
2. transition-duration: duración del efecto. Puede ser en segundos (s) o milisegundos (ms).
3. trasition-timing-function: define la curva de velocidad a la que se produce el efecto. Puede ser:
   • ease: este es el valor por defecto. Tiene un comienzo lento, luego rápido y termina de nuevo lentamente. Es equivalente a cubic-bezier(0.25,0.1,0.25,1).
   • linear: la misma velocidad durante toda la duración de la transición. Equivalente a cubic-bezier(0,0,1,1).
   • ease-in: efecto de transición con comienzo lento. Equivalente a cubic-bezier(0.42,0,1,1).
   • ease-out: efecto de transición con comienzo rápido y final lento. Equivalente a cubic-bezier(0,0,0.58,1).
   • ease-in-out: efecto de transición con comienzo y final lento; más rápido en medio. Equivalente a cubic-bezier(0.42,0,0.58,1).
   • cubic-bezier(n,n,n,n): define tus propios valores para la curva de Bezier. Cada valor es entre 0 y 1.
   • initial: establece esta propiedad a su valor por defecto.
   • inherit: hereda esta propiedad del elemento padre.
4. transition-delay: retraso en el comienzo de la transición. Puede ser en segundos (s) o milisegundos (ms).

transition-timing-function y transition-delay se pueden omitir. En este caso se tomará el valor ease y 0 respectivamente. Por ejemplo:

a {
    transition: text-decoration 0.8s;
}

Además, se pueden especificar varias transiciones a la vez separando el grupo de parámetros por una coma:

a {
    transition: text-decoration 0.8s, color 1s, font-weight 0.5s ease-out 0.1s;
}

Y también se puede aplicar a todas las propiedades CSS del elemento (en el siguiente ejemplo el cambio de cualquier propiedad de estilo del elemento a tendría una transición de 0.8s):

a {
    transition: all 0.8s;
}

Compatilidad navegadores

IE soporta la propiedad transition desde la versión 10; olvídate de IE 9 y versiones anteriores. En los demás navegadores es soportada desde versiones tempranas si se añaden los prefijos propios de cada uno. La versión de transition con mayor compatibilidad sería, por ejemplo:

.ejemplo {
    /*Chrome, Safari*/
    -webkit-transition: width 8ms linear 1s;
    /*Firefox*/
    -moz-transition: width 8ms linear 1s;
    /*Opera*/
    -o-transition: width 8ms linear 1s;
    /*Standard*/
    transition: width 8ms linear 1s;
}

Aplicación

Resumiendo, para aplicar transition hay que seguir estos pasos:

1. Definir el estilo básico de un elemento
2. Definir un estilo diferente para algunas acciones, generalmente :hover, :focus y similares.
3. Definir la regla transition como se ha explicado anteriormente.

Ejemplos

En el siguiente ejemplo se puede ver como, al poner el ratón encima de cada div, hay una transición de las propiedades width y background con la misma duración pero con diferente curva de velocidad:

Ejemplo: cambio de tamaño y de forma:

Efecto fade-in

Menu vertical 1 nivel
HTML

<div id="vdknopka">
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
</div>

CSS

#vdknopka a, #vdknopka a:visited { position:relative; 
  text-decoration:none; 
  text-align:center; 
  background-color:#9ab; 
  color:#fff; 
  display:block; width:10em; 
  border:2px solid #fff; 
  border-color:#def #678 #345 #cde; padding:0.25em; 
  margin:0.5em auto; 
} 
#vdknopka a:hover {
  top:2px; 
  left:2px; 
  color:#fff; 
  border-color:#345 #cde #def #678; 
} 

Menu horixontal 1 nivel
HTML

<div id="vdknopka1">
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
</div>

CSS

#vdknopka1 { 
  text-align:center; 
  width:41em; 
  margin:0 auto;   
} 
#vdknopka1 a, 
#vdknopka1 a:visited { position:relative; 
  text-decoration:none; 
  text-align:center; 
  background-color:#9ab; 
  color:#fff; 
  border:2px solid #fff; 
  border-color:#def #678 #345 #cde; padding:0.25em 2em; 
  margin:0.5em auto;   
} 
#vdknopka1 a:hover {
  top:2px; 
  left:2px; 
  color:#fff;
  border-color:#345 #cde #def #678;   
} 

Menu horizontal
HTML

 <ul class="nav">
   <li>
    <a href="http://megaweb.su/">Меню 1</a>
    <ul class="sub1">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
     <li class="p4">
      <a href="http://megaweb.su/">Категория 4</a>
     </li>
     <li class="p5">
      <a href="http://megaweb.su/">Категория 5</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 2</a>
    <ul class="sub2">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 3</a>
    <ul class="sub3">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
     <li class="p4">
      <a href="http://megaweb.su/">Категория 4</a>
     </li>
     <li class="p5">
      <a href="http://megaweb.su/">Категория 5</a>
     </li>
     <li class="p6">
      <a href="http://megaweb.su/">Категория 6</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 4</a>
    <ul class="sub4">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
    </ul>
   </li>
   <li>
    <a href="http://megaweb.su/">Меню 5</a>
    <ul class="sub5">
     <li class="p1">
      <a href="http://megaweb.su/">Категория 1</a>
     </li>
     <li class="p2">
      <a href="http://megaweb.su/">Категория 2</a>
     </li>
     <li class="p3">
      <a href="http://megaweb.su/">Категория 3</a>
     </li>
    </ul>
   </li>
  </ul>
  <div class="clear"></div>

CSS

.nav, .nav ul { 
  padding:0; 
  margin:0; 
  list-style:none; } 
.nav { 
  position:relative; 
  width:540px;
  margin:0 auto; 
} 
.nav ul { 
  position:absolute; 
  top:37px; 
  left:0; 
  height:0; 
  overflow:hidden; 
} 
.nav li { 
  float:left;
  position:relative; background:transparent; 
} 
.nav li a { 
  display:block; 
  line-height:35px; 
  padding:0 20px; 
  border:1px solid #444; 
  border-bottom-color:#000; 
  color: #999; 
  text-shadow: 1px -1px 1px #000; text-decoration:none; 
  font-size:12px; 
  font-weight:bold; 
  -webkit-transition: 0.6s; 
  -moz-transition: 0.6s; 
  -o-transition: 0.6s; 
  transition: 0.6s; 
} 
.nav li:hover > 
a {
  background:#666; 
  border-color:#888 #777 #444 #555; color:#fff; 
} 
.nav li:hover ul.sub1 { 
  width:180px;
  height:185px; 
} 
.nav li:hover ul.sub2 {
  width:150px; 
  height:111px; 
} .nav li:hover ul.sub3 {    width:130px; 
 height:222px; 
} .nav li:hover ul.sub4 { width:150px; 
  height:111px; 
} 
.nav li:hover ul.sub5 { 
  width:160px;
  height:111px; 
} .nav ul li { 
  width:100%;
  opacity:0; 
  -webkit-transition: 0.5s; 
  -moz-transition: 0.5s; -o-transition: 0.5s; 
  transition: 0.5s; 
} .nav li ul li.p1 { 
  -webkit-transition-delay: 0s; 
  -moz-transition-delay: 0s; 
  -o-transition-delay: 0s; transition-delay: 0s; 
} 
.nav li ul li.p2 { 
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s; 
  -o-transition-delay: 0s; transition-delay: 0s; 
} 
.nav li ul li.p3 { 
  -webkit-transition-delay: 0s; 
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s; transition-delay: 0s; 
} 
.nav li ul li.p4 { 
  -webkit-transition-delay: 0s; 
  -moz-transition-delay: 0s; 
  -o-transition-delay: 0s; transition-delay: 0s; 
} 
.nav li ul li.p5 { 
  -webkit-transition-delay: 0s; 
  -moz-transition-delay: 0s; 
  -o-transition-delay: 0s; transition-delay: 0s; 
} 
.nav li ul li.p6 {
  -webkit-transition-delay: 0s; 
  -moz-transition-delay: 0s; 
  -o-transition-delay: 0s; transition-delay: 0s; 
} 
.nav li:hover ul li { 
  opacity:1; 
} 
.nav li:hover ul li.p1 { 
  -webkit-transition-delay: 0.5s; 
  -moz-transition-delay: 0.5s; 
  -o-transition-delay: 0.5s; transition-delay: 0.5s; 
} 
.nav li:hover ul li.p2 { 
  -webkit-transition-delay: 0.6s; 
  -moz-transition-delay: 0.6s; 
  -o-transition-delay: 0.6s; transition-delay: 0.6s; 
} 
.nav li:hover ul li.p3 { 
  -webkit-transition-delay: 0.7s; 
  -moz-transition-delay: 0.7s; 
  -o-transition-delay: 0.7s; transition-delay: 0.7s; 
} 
.nav li:hover ul li.p4 { 
  -webkit-transition-delay: 0.8s; 
  -moz-transition-delay: 0.8s; 
  -o-transition-delay: 0.8s; transition-delay: 0.8s; 
} 
.nav li:hover ul li.p5 { 
  -webkit-transition-delay: 0.9s;
  -moz-transition-delay: 0.9s; 
  -o-transition-delay: 0.9s; transition-delay: 0.9s; 
} 
.nav li:hover ul li.p6 { 
  -webkit-transition-delay: 1s; 
  -moz-transition-delay: 1s; 
  -o-transition-delay: 1s; transition-delay: 1s; 
} 
.nav ul li a { 
  background:#666; 
  border-color:#888 #777 #444 #555; 
  color:#bbb; 
  line-height:1px; 
  -webkit-transition: 1.5s; 
  -moz-transition: 1.5s; 
  -o-transition: 1.5s; 
  transition: 1.5s; 
} 
.nav li:hover ul li a { 
  line-height:35px; 
} 
.nav ul li a:hover { background:#09c; 
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 25, 0)); 
} 
* html .nav a {
  border-color:#444 #444 #000 #444; height:35px; float:left; 
} 
.nav a:hover {
  background:#666; 
  border-color:#888 #777 #444 #555; color:#fff; 
} 
.nav a:hover ul.sub1 {
  width:180px; height:185px; 
} .nav a:hover ul.sub2 { width:150px; height:111px; }
.nav a:hover ul.sub3 { 
  width:130px;
  height:222px; 
} 
.nav a:hover ul.sub4 { 
  width:150px; height:111px; 
} .nav a:hover ul.sub5 { width:160px;
  height:111px; 
} 
.nav a:hover ul li a { 
  line-height:35px; 
  height:35px; float:none; 
} 
.clear { 
  clear:both; height:0; 
  line-height:1px; 
  margin:0;
  padding:0; 
} 

Fuente
Sombra para texto:
1. text-shadow: -1px -1px #666, 1px 1px #FFF;
2. text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
3. text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;
4. text-shadow: 1px 0 #F33, -1px 0 #33F;
5. text-shadow: 1px 1px 2px #999;
6.text-shadow: 2px 2px 3px #999;
7. text-shadow: 0 0 8px #000;
8. text-shadow: 0 0 5px #FF0;
9.
10. text-shadow: 1px 1px 0px #eee, 3px 3px 0px #707070;
11. text-shadow: 0px 1px 2px #737373;
12. text-shadow: 0px 0.5px 1px #F2F2F2;
13. text-shadow: #f8fcee 0 1px 1px;
14. text-shadow: 2px 2px 3px #000;
15. text-shadow: 2px 2px #666;
16. text-shadow: 2px -2px 3px #000;
17. text-shadow: 0px 1px 1px #fff;
18. text-shadow: 0px 1px 1px #000;
19. text-shadow: 0px 0px 3px#fff;
20. text-shadow: 1px 1px 4px#000;
21. text-shadow: 0px 1px 0px #ccc;