Subscribe:

Ads 728x90px

19 may. 2012

Transiciones y Animaciones con CSS3

Es importante aprender a usar las transiciones y animaciones con eficacia, y para reconocer y entender la construcción importantes de bloques. Con animaciones en CSS3, realmente estoy hablando de dos partes de la misma especificación. Transiciones, son las formas automatizada más simple de CSS3, que permiten movimientos entre dos estados. 


Si deseas que las imágenes tengan el efecto de agrandarse cuando mueves el cursor sobre ellas, por ejemplo, especifica un estado estacionario que utiliza la propiedad de valores transform y scale (con los correspondientes prefijos específicos ), y define una transición en el estilo original de los elementos:


img 
{
-webkit-transition: .5s linear all;
-moz-transition: .5s linear all;
-o-transition: .5s linear all;
transition: .5s linear all;
}


img:hover 
{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

El atributo de transición all difiere entre el estado normal y estacionario. Si tambien especificas top:-10px; tambien animaria su posicion a medida que escala. Definitivamente que las  animaciones funcionan mejor cuando es acelerada por el GPU, el cual WebKit, sólo lo hace con opacity y -webkittransform. Se sugiere utilizar transform: translate () para movimiento en lugar de propiedades direccionales.

Para que veas en acción lo dicho acá, abre cualquier editor de texto de preferencia,
copia y pega el código de abajo. Puedes guardarlo dandole el nombre que quieras, pero no olvides de guardarlo con la extension .html por ejemplo "animación-css3.html"

NOTA: Es importante que sepas que esto no funciona en Internet Explorer, pero si en Firefox, Safari, Chrome u Opera.

Simple estructura de HTML...

<html>
 <head>
   <title>Test de Transicion y Animacion con CSS3</title>
   <style type="text/css>   
img 
{
-webkit-transition: .5s linear all;
-moz-transition: .5s linear all;
-o-transition: .5s linear all;
transition: .5s linear all;
}
 
img:hover 
{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
  </style>
 </head>
 <body>
  <p>Mueve el cursor sobre la imagen para ver el efecto</p>
 <img src="http://i1250.photobucket.com/albums/hh539/nicachipal/evernoteIcon.png" />
</body>
</html>


Productos Recomendados