Curso de Diseño y maquetación web

Animaciones con CSS3

Transiciones

Con CSS3 podemos hacer transiciones para dotar de efectos visuales y 'suavizar' los cambios de estado de los elementos. Estas son las propiedades:

Propiedades	Valor
transition-property	all | none | propiedad. A qué propiedades CSS va a aplicar.
transition-duration	0 | Tiempo de duración en segundos (s) o milisegundos (ms)
transition-timing-function	ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(A, B, C, D). Determina el tipo de transición o comportamiento en función de la velocidad.
transition-delay	0 | Tiempo de retardo en segundos (s) o milisegundos (ms)
transition:	property | duration | timing-function | delay (omitibles)

El código de la transición es el siguiente:

.cajita-1 {
    width: 150px;     
    transition: all 2s ease-in-out .25s;
    -webkit-transition: all 2s ease-in-out .25s;
    &:hover {
        width: 100%;
        background-color: #1a7e80;
    }
}

timing-function

Cubic-bezier

Con esta propiedad podemos regular y personalizar la velocidad de la transición en sus distintas fases de duración. Se puede hacer que empiece muy rápido y vaya frenando conforme se acerque al final y viceversa, que empiece y acabe lenta pero acelere a mitad, etc.

La siguiente tabla muestra los valores que puede tomar la propiedad y su equivalencia en cubic-beizer:

Valor	Inicio	Transcurso	Final	Equivalente en cubic-beizer
ease	Lento	Rápido	Lento	(0.25, 0.1, 0.25, 1)
linear	Normal	Normal	Normal	(0, 0, 1, 1)
ease-in	Lento	Normal	Normal	(0.42, 0, 1, 1)
ease-out	Normal	Normal	Lento	(0, 0, 0.58, 1)
ease-in-out	Lento	Normal	Lento	(0.42, 0, 0.58, 1)
cubic-bezier(A, B, C, D)	-	-	-	Transición personalizada

El código de la transición es el siguiente:

.cajita-1 {
    width: 150px;     
    transition: all 2s cubic-bezier(0.1, 0.7, 1.0, 0.1) .25s;
    -webkit-transition: all 2s cubic-bezier(0.1, 0.7, 1.0, 0.1) .25s;
    &:hover {
        width: 100%;
        background-color: #1a7e80;
    }
}

Animaciones

Ya conocemos la sintaxis y las propiedades de las transiciones, lo que nos va a facilitar comprender las animaciones. La estructura es similar, pero nos ofrecen más posibilidades de personalización, de concatenación y en definitiva un mayor control sobre los cambios de estado a los que queremos dotar de espectaculares efectos visuales.

Propiedades	Valor	Descripción
animation-name	none | nombre	Nombre con el que bautizamos nuestra animación
animation-duration	0 | Tiempo	Tiempo de duración en segundos (s) o milisegundos (ms)
animation-timing-function	ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(A, B, C, D)	Determina el tipo de transición o comportamiento en función de la velocidad.
animation-delay	0 | Tiempo	Tiempo de retardo en segundos (s) o milisegundos (ms)
animation-iteration-count	1 | infinite | número	Número de veces que se tiene que repetir la animación
animation-direction	normal | reverse | alternate | alternate-reverse	Dirección de la animación
animation-fill-mode	none | forwards | backwards | both	En qué estado ha de finalizar la animación, quedarse en el final, volver al principio o una combinación de ambas
animation-play-state	running | paused	Permite establecer el estado de la animación: en reproducción o en pausa.
animation	name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state	Shorthand con todo en una linea. Los valores son omitibles.

keyframes

Una de las partes fundamentales de las animaciones que las hace diferentes de las transiciones son los keyframes. Se trata de un concepto heredado de la edición audiovisual, y que son por así decirlo los "fotogramas clave" donde van a suceder cosas:

Se invoca con @keyframes y el nombre de la animación.

@keyframes nombre  {
    selector-keyframe-0  { 
        propiedad: valor;
        propiedad: valor;
        
    }
    selector-keyframe-100  { 
        propiedad: valor;
        propiedad: valor;
        
    }
}

Los selectores de keyframes pueden ser 'from' y 'to' si queremos que vaya de principio a fin, pero si queremos añadir keyframes intermedios, se pueden usar directamente porcentajes. Incluso se pueden agrupar fotogramas cuando utilizan las mismas propiedades CSS. Por ejemplo una animación con 4 selectores de keyframes: (0%, 25%, 75% y 100%). Si cuando la animación va por el 75% vuelve al estado inicial, se puede poner:" 0%, 75% {propiedades...}".

Ejemplo completo: CAMBIO DE COLOR