Transición para efectos {Efectos "lentos"}

En varios tutoriales, donde agregamos efectos, por ejemplo a una imagen, o a link, donde este cambia al pasar el cursor por encima {hover}, vemos que cambia de manera muy rápida, & quizá sea algo molesto, mas cuando un solo elemento tiene varios efectos, como resultado, no se pueden apreciar.
Utilizando "transición" en el code CSS, podemos obtener un cambio de un efecto a otro, con una velocidad mas reducida; de manera que, se puede observar con mas atención la "magia" que queremos lograr ~

Como EJEMPLO, vamos a colocarle transición a una imagen con sombra, que al pasar el cursor por encima, quede sin sombra.

Img sin transición.

Img con transición.

Donde el code original {es decir, de la primera imagen} seria:

#mmc img { padding: 5px; -webkit-box-shadow: 0 0 7px #000; -moz-box-shadow: 0 0 7px #000; }
#mmc img:hover { -webkit-box-shadow: 0 0 0px #000; -moz-box-shadow: 0 0 0px #000;}

& el de la segunda, seria el mismo + el siguiente code CSS que daría la transición:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

El CSS completo quedaría como:

#mmc img { padding: 5px; -webkit-box-shadow: 0 0 7px #000; -moz-box-shadow: 0 0 7px #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
#mmc img:hover { -webkit-box-shadow: 0 0 0px #000; -moz-box-shadow: 0 0 0px #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}

NOTA:
Podemos colocar este código CSS a cualquier efecto que queramos graduar la velocidad de "cambio", se puede utilizar tanto en cualquier efecto para imágenes, como para links, edición en blockquotes & muchos otros efectos. Cuando utilizamos el efecto de rotación, al agregarle transición al code, podremos ver el trayecto de la rotación, como vemos en ESTE tutorial. Ahora, a utilizar la imaginación & editar!♥