Hasta ahora hemos hablado un poco sobre cómo diseñar nuestros elementos html. ¿Y si te dijéramos que no necesariamente tienes que crear páginas estáticas? Aunque Javascript es el lenguaje soberano para integrar las animaciones, incluso nuestro amigo CSS puede darnos grandes satisfacciones.

En esta guía hablaremos sobre cómo animar y hacer que nuestros sitios web sean más dinámicos sin usar javascript, pero solo con el uso de CSS.
Concretamente conoceremos 3 propiedades fundamentales:

• transition
• transform
• animation

Transition

La propiedad transition del CSS te permitirá lograr una transición suave entre dos estados en la misma propiedad.
Se utiliza principalmente con pseudo-clases como hover, active o focus.

Podemos especificar 4 propiedades para la transición de un estado a otro:

• transition-property: la propiedad sobre la que aplicar la transición;
• transition-duration: la duración de la transición;
• transition-timing-function: la curva temporal de la transición;
• transition-delay: el retraso con el que se inicia la transición;

Estas 4 propiedades se pueden agrupar en una sola abreviatura (atajo): la propiedad "transition"
Veamos un pequeño ejemplo:

.button {
   background : red;
   border: solid 2px red;
   color: black;
   transition-property: all;
   transition-duration: 0.5s;
   transition-timing-function: linear;
}

.button:hover {
   background: orange;
   border: solid 2px orange;
   color: white;
}

En este sencillo ejemplo, vemos como al pasar el cursor sobre el botón, su color de fondo, borde y texto irá cambiando poco a poco según las características que le hayamos dado.
También notamos que incluso cuando el mouse deja el botón, las propiedades volverán a su estado inicial con una transición; esto se debe a que hemos especificado la transición en el estado predeterminado y no en la pseudoclase.
Como dijimos, también hay otro método, más corto, para escribir todas estas propiedades, a saber, la propiedad de transición.

Veamos en este ejemplo cómo se transforma el código. 

.button {
   background: red;
   border: solid 2px red;
   color: black;
   transition: all 0.5s linear;
}

.button:hover {
   background: orange;
   border: solid 2px orange;
   color: white;
}

También destacamos la palabra clave "all" utilizada en la propiedad propiedad de transición: esto atribuye una transición a todas las propiedades del elemento.

Por ejemplo, si reemplazamos la palabra clave "todo" con "fondo", la transición se aplicaría solo a la propiedad de fondo, mientras que las propiedades de borde y color cambiarían de inmediato, casi dando a la vista un efecto de "chasquido".

Transform

La propiedad transform nos permite transformar un elemento en 2D o 3D.
Las transformaciones que podemos realizar en 2D nos permiten:

• traslación
• rotación
• redimensionar
• distorsionar

Las transformaciones que podemos realizar en 3D nos permiten cambiar la perspectiva de un elemento.
Ahora veamos las transformaciones que podemos realizar en 2D, así como las más utilizadas:

Traslación 

.transform {
   transform: translate(x,y);
}

Con esta función podemos mover un elemento; acepta dos parámetros (x e y) que corresponden al desplazamiento en el eje x - que es el horizontal - y en el eje y - que es el vertical -.
También tenemos la posibilidad de trasladar solo en el eje X o en el eje Y con

• translateY(y)
• translateX(x)

Obviamente, los valores a ingresar son los valores inherentes a la macrocategoría de la unidad de medida.

Rotación

.transform {
   transform: rotate(angulo);
}

Con esta función podemos rotar un elemento; acepta como parámetro un ángulo de rotación - por ejemplo “120°” -, tanto positivo como negativo.

Redimensionar 

.transform {
   transform: escalera (x,y);
}

Con esta función podemos redimensionar un elemento a escala; los valores a introducir serán un número entero o una coma dependiendo de cuánto queramos redimensionar en el eje horizontal y en el eje vertical.

ejemplo: 

.transform {
   transform: escalera(1.5,2);
}

En el caso de que el redimensionado sea el mismo tanto para el eje horizontal como para el vertical, también podemos introducir un único valor.

Distorsión 

.transform {
   transform: skew(angulo-x,angulo-y);
}

Con esta función podemos distorsionar la visualización de un elemento; los valores a introducir serán un ángulo para la horizontal y otro para la distorsión vertical.
Para todas las transformaciones vistas hasta ahora, también podemos añadir la propiedad "transform-origin" que indicará el punto "ancla" o el punto de origen de la transformación. Por defecto este punto coincide con la esquina superior izquierda.

Animation

Las animaciones son probablemente la herramienta de diseño de animación web más poderosa que CSS3 tiene para ofrecer.
Las animaciones te permiten cambiar gradualmente el estilo de los elementos de la página, definiendo más "keyframes" dentro de la animación.
A diferencia de la transición, la propiedad animation nos da mucho más control sobre las etapas intermedias de la animación.
Podemos crear una animación a través de la regla @keyframes
Los fotogramas clave dentro de esta regla determinan el tipo de estilo aplicado a un elemento en un momento dado, básicamente representando el "código" que ejecuta la animación.

Veamos como crear un animación con @keyframes 

@keyframes bounce {

  from {
    transform: translate(0, 0);
  }

  40% {
    transform: translate(0, -30px) escaleraY(1.1);
  }

  70% {
    transform: translate(0, -15px) escaleraY(1.05);
  }

 to {
    transform: translate(0, 0);
  }
}

De esta forma hemos creado una animación, a la que hemos llamado "bounce", que simulará el rebote de una pelota. Como podemos ver, hemos creado 4 keyframes donde se modificará el elemento. 

El primero, es decir from, indica el punto de partida de nuestro elemento y también podemos sustituirlo por 0%.
El último, es decir to, por otro lado, indica el punto final de la animación y también podemos reemplazarlo por 100%.
Los otros dos fotogramas clave, 40% y 70%, en cambio, indican estados intermedios de nuestra animación; estos no son obligatorios, a diferencia del estado inicial y final de la animación.

Podemos añadir tantos keyframes como queramos a nuestra animación y “complicarla” a nuestro gusto.

Una vez que haya creado una animación con un nombre, solo tenemos que asignarlo a un elemento. 

.bounce-animated {
   animation-name : bounce;
   animation-duration: 1s;
} 

Tenemos muchas propiedades que nos permiten modificar una animación, pero estas dos, animation-name y animation-duration, son necesarias para iniciar nuestra animación.

Vamos a verlos todos ahora:

• animation: modalidad abreviada que sirve para confirgurar todas las propiedades que siguen;
• animation-name:  (obligatorio) indica el nombre de la animación que se aplicará a un elemento;
• animation-duration: (obligatorio) especifica cuanto dura la animación;
• animation-delay: (opcional) indica el retraso el términos de tiempo con el que comienza la animación;
• animation-direction: (opcional) especifica la dirección de la animación; los posibles valores son:
   
  1. normal : desde 0% a 100% 
  2. reverse: desde 100% a 0%;
  3. alternate: desde 0% a 100% y desde 100% a 0% en función de cuantas veces se repite la animación
  4. alternate-reverse : desde 100% a 0% y desde 0% a 100% en función a cuantas veces se repite la animación
      
• animation-iteration-count: (opcional) especifica cuantas veces se tiene que repetir la animación, los posibles valores son:
   
  1. infinita: la animación se repite indefinidamente
  2. número : será el número de veces que se repetirá la animación.
      
• animation-fill-mode: (opcional) indica el estilo que se aplicará antes de que comience la animación y una vez finalizada la animación; los valores posibles son:
  1. forwards : una vez terminada el elemento tendrá el estilo del último keyframe
  2. backwards : una vez terminada el elemento tendrá el estilo del primer keyframe
  3. both : cuando la animación termina mantiene lel estilo del kayframe en que terminó
      
• animation-timing-function: identifica la curva di velocidad de la animación

¡Con esta descripción general de los efectos de animación, tus sitios serán únicos! Entonces, ¿te gustaría probar?