Hace mucho que los desarrolladores esperamos algo como esto en la web, la posibilidad de crear animaciones fácilmente con CSS, es una de las cosas que le pone el sabor a la web cuando queremos hacer una navegación en nuestro sitio un poco mas divertida y para este problema usamos comúnmente JavaScript complementado con JQuery o algún otro Framework para facilitarnos la vida, aun que es muy fácil de implementarlo, no nos quita el problema del todo.
Esperando algo mas fácil y que venga de la propia tecnología para la web HTML5 nos trae un mar de capacidades que podemos ir implementando en nuestros sitios web fácilmente y dentro viene CSS3 con la capacidad de animaciones y transiciones.
Sintaxis básica de una animación
Estado inicial
transition: transform 0.5s linear; /*Transición de la animación*/
Estado final
transform: scale(1.3); /*Tipo de transformación del objeto*/
transition: transform 0.5s linear; /*Transición de la animación*/
La sintaxis de animaciones en CSS3 son muy básicas y muy lógicas, se necesitan 5 cosas, estado inicial, estado final, un cambio, tiempo y tipo de transición, el cambio seria el tipo de transformación, en el caso del ejemplo anterior se utilizo SCALE que seria el cambio de tamaño y el tiempo de 0.5 segundos en transición lineal.
Ejemplo real de una animación
#cuadro1
{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #09F;
/*Alinea los bloques en linea como si fuera un float:left*/
display:inline-block;
margin: 1%;
padding: 1%;
width: 28%;
/*Animacion de transision con css3, Tipo de fondo, tiempo y tipo de animacion*/
transition: transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-moz-transition: -moz-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
}
#cuadro1:hover
{
background:#6CF;
position: relative;
/*Anima el hover con aumento de tamaño 1.3*/
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transition: transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-moz-transition: -webkit-transform 0.5s linear;
-o-transition: -webkit-transform 0.5s linear;
/*Hace que siempre que hagamos hover el article quede encima de todos*/
z-index: 99;
}
Nota: Para todas las funciones de CSS3 utilizamos las Extensiones Propietarias ya que el estándar no esta definido aun como las que utilizamos en el tutorial de Como dividir un bloque en columnas con column-count de CSS3.
Notas importantes
Algo importante es saber que la animación es aplicable a cualquier cosa que sea un bloque, si este no es un bloque, la animación no se realizara, también es necesario saber que existen muchos tipos de transiciones y transformaciones solo es cuestión de documentarse al respecto pero con estos conocimientos básicos serán capaces de aplicarlo.
Puedes ver el ejemplo en funcionamiento Aqui
