Como crear animacion con CSS

De wikipedia_IndianWebs
Saltar a: navegación, buscar

Para poder realizar una animación con tan solo código CSS3, en el elemento al que se le quiera aplicar la animación deberemos colocarle esto:

opacity: 0;
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
-ms-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

Y para que la animación la haga al pasar por encima de dicho elemento:

opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);

Se pueden modificar tanto los parámetros scale como los segundos en la propiedad transition.

Notas

Las etiquetas -webkit, -moz, -o son para asegurar que funcione en la mayoría de los navegadores.

Herramientas personales
Espacios de nombres

Variantes
Acciones
Navegación
Herramientas
Compartir
Categorías
Apps
[×] CSS
[×] Diseño
Google
[×] Joomla
[×] Magento
[×] Mobile
[×] RRHH
[×] YouTube