Crear animaciones personalizadas con CSS

Vamos a mostrar como crear animaciones personalizadas en CSS utilizando keyframes, para nuestro ejemplo crearemos una simple animación de fadeIn y otra con rotación, pero pueden realizarse efectos combinando cualquier atributo que sea animable.

Comenzaremos creando una clase genérica a todas nuestras animaciones en la que vamos a especificar el modo y el tiempo de la animación, luego definiremos los fotogramas de la secuencia de animación con keyframes y finalmente una clase para poder utilizar esa secuencia.

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Creando la animación de fadeIn:

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

El objetivo de separar el tipo de animación en una clase (.fadeIn) es que podamos crear tantas clases como animaciones consideremos necesarias.

Sumando una animación de rotación:

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.rotate{
  animation-name: rotate;
}

Para utilizar las animaciones creadas simplemente añadimos las clases a nuestros elementos html:

<p class="animated fadeIn">Texto animado con nuestro fadeIn</p>

<p class="animated rotate">Texto animado con nuestro rotate</p>

Una buena práctica es, también, crear clases para manejar diferentes velocidades de animaciones.

.fast {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
.slow {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

<p class="animated fadeIn">Texto animado con nuestro fadeIn</p>
<p class="animated fadeIn fast">Texto animado con nuestro fadeIn en velocidad rápida</p>
<p class="animated rotate">Texto animado con nuestro rotate</p>
<p class="animated rotate slow">Texto animado con nuestro rotate en velocidad lenta</p>