Muchas animaciones con CSS y mucha paciencia

Las animaciones con CSS parecen engorrosas porque son engorrosas; no es que sean tan difíciles como parecen sino que se nos complica usarlas por dos motivos, constantemente aparecen nuevas propiedades y , sobre todo, para usarlas, deben multiplicarse las reglas porque cada navegador requiere que se escriban las reglas incluyendo su prefijo y eso hace que una cosa que debería ser simple, se transforme en una larga lista que nos asusta.

De nada sirve quejarse, es lo que hay ... por ahora.

Si vamos a utilizarlas o queremos experimentar con ellas, animate.css es una buena ayuda porque allí, han resumido una larga lista de reglas estilos con un surtido enorme de animaciones que pueden usarse en los navegadores que las comprenden (Firefox, Chrome, Safari, Opera, IE10) y que no tendrán efecto en el resto.

Las animaciones pueden ser descargadas en conjunto o seleccionar sólo algunas y lo que obtendremos en un archivo de extensión CSS que podemos abrir con el block de notas y copiar y pegar en nuestra plantilla junto con el resto de las reglas de estilo o entre etiquetas <style> </style>..

Acá hay unos pocos ejemplos; coloco un HTML como este:

<div id="ejemploANI">
... un contenido cualquiera ...
</div>

Y le pondré propiedades de estilo para que quede fijo:

#ejemploANI {
  left: 50%;
  margin-left: -320px;
  opacity:0; /* lo mantengo oculto */
  position: fixed;
  top: 200px;
  width: 400px;
  z-index: 1000;
  /* y cualquier propiedad gráfica */
  background-color: #445566;
  border-radius: 50px;
  box-shadow: 0 0 10px #ABC inset;
  color: #FFF;
  font-size: 20px;
  padding: 20px 0;
  text-align: center;
  /* las reglas genericas de la animación */
  -moz-animation-fill-mode: both; -moz-animation-duration: 1s;  /* Firefox */
  -webkit-animation-fill-mode: both; -webkit-animation-duration: 1s;  /* Chrome/Safari */
  -o-animation-fill-mode: both; -o-animation-duration: 1s;  /* Opera */
  -ms-animation-fill-mode: both; -ms-animation-duration: 1s;  /* IE10 */
  animation-fill-mode: both; animation-duration: 1s; /* w3.org */
}

Ahora, nos faltarían las animaciones; en este caso solo uso cuatro:

lightSpeedIn hará que el DIV aparezca de derecha a izquierda y lightSpeedOut hará que "se vaya" en al misma dirección; para eso, bastaría agregarle la clase al DIV:

<div id="ejemploANI" class="lightSpeedIn"">

o bien

<div id="ejemploANI" class="lightSpeedOut">

¿Cómo hacer eso? Dependerá del uso que queramos darle; por ejemplo, podemos hacer que aparezca y desaparezca haciendo click en alguna parte:

<a href="javascript:void(0);" onclick="document.getElementById('ejemploANI').className = 'NOMBRE_CLASE'> click acá </a>

lightSpeedIn | lightSpeedOut
bounceInUp | bounceOutUp

¿Y el CSS de la animación? Sólo uno a manera de ejemplo.

@-moz-keyframes lightSpeedIn {
  0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-webkit-keyframes lightSpeedIn {
  0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-o-keyframes lightSpeedIn {
  0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedIn {
  0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
  -moz-animation-name: lightSpeedIn; -moz-animation-timing-function: ease-out;
  -webkit-animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out;
  -o-animation-name: lightSpeedIn; -o-animation-timing-function: ease-out;
  animation-name: lightSpeedIn; animation-timing-function: ease-out;
}

Buenos dias, tardes, noches ...