Ir al contenido principal

Entradas

Mostrando entradas de enero, 2012

Transiciones con CSS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el post previo se comentó la manera de hacer Animaciones con CSS3, en esta ocasión hablaremos de otra forma de generar cambios visuales: Transiciones con CSS3. A diferencia de las animaciones, las transiciones no utilizan "keyframes", sino mas bien son indicaciones de cómo queremos visualizar los cambios (tiempo, propiedades, "easing"), dichos cambios se pueden activas utilizando pseudoselectores CSS como "hover". En el cuadro siguiente se aplicó un efecto donde la anchura y el color cambia al ubicar el mouse sobre el.

Pasa el mouse sobre mi
Realicemos entonces los pasos para implementar las transiciones.

1.- Coloquemos el elemento al que queremos aplicarle las transiciones y le damos un ID:

<body>
     <div id="miDiv">
     Este es mi DIV
     </div>
</…