Introducción

¿Tienes una web y no sabes cómo crear animaciones para darle ese toque diferenciador? Pues sigue leyendo, porque en este artículo veremos cómo crear animaciones con CSS con poco esfuerzo. Si no tienes conocimientos previos de CSS no te preocupes porque en este articulo veremos una manera de tener animaciones sin tener que tocar nada de CSS ¿mola no?

Lo primero que vamos a ver es una librería CSS que nos da animaciones ya creadas, las típicas, por ejemplo, fade, slide, bounce, etc

Si esto te parece poco y quieres crear tu mismo las animaciones, no te preocupes, porque también las vamos a crear de manera manual animaciones CSS, para que tengas un control total de las animaciones de tu página web.

Animate css, una librería para crear animaciones con CSS

animate css

Animate.css es una de las librerías de animaciones más famosas debido a que es muy sencilla de utilizar. En su página oficial, encontrarás una demo de todas las animaciones que puedes hacer con esta librería css.

Para empezar a usar la librería, simplemente descarga el archivo css desde este enlace, para ello haz clic derecho en la página y haz clic sobre el botón de “Guardar como” y guárdalo en tu proyecto.

Lo siguiente que tienes que hacer, como cualquier otro archivo css, es importarlo en el head del html donde lo vayas a usar:

<head>
...
  <link rel="stylesheet" href="animate.css">
...
</head>

Sustituye la propiedad href por la ruta relativa o absoluta del fichero animate.css que acabas de descargar.

Por cierto, otra forma de usar esta librería es mediante el CDN de animate css. Un CDN es un servidor preparado para servir los archivos css o js que necesites, del tal forma que no te lo tienes que descargar en tu máquina (pierdes algo de rapidez pero ahorras en comodidad), para usarlo simplemente pon en el HTML:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

🎉 ¡Y listo! así de sencillo, ya puedes empezar a crear animaciones css de forma muy sencilla, pero ¿cómo se crean?

Pues muy sencillo, entra otra vez en su página oficial y echa un vistazo al cuadro desplegable (dónde pone “bounce”). ¿Ves todas esas animaciones? Pues quédate con el nombre que aparece, por ejemplo, el de pulse.

Ahora solo tienes que poner en el la clase del elemento del html que quieres animar ese nombre, junto a “animated” para que la librería lo detecte y se pueda animar, por ejemplo:

<h1 class="animated infinite pulse delay-2s">Example</h1>

¿Ves que también he puesto la clase “infinite” y la de “delay-2s”? Esas clases también son de la librería de animate.css. La clase infinite sirve, como su nombre indica, para que la animación sea infinita, es decir, para que se repita todo el rato (por defecto la animación se muestra una sola vez).

La clase delay sirve para hacer que la animación tarde en empezar, en este caso tarda 2 segundos. Este tiempo de 2 segundos lo puedes cambiar si cambias su clase.

Muy bien ya sabes cómo crear animaciones, pero te estarás preguntando: ¿y cómo haces que se muestren cuando quieras, es decir, por ejemplo cuando pulsas un botón?

Pues para hacer esto vas a necesitar Javascript. Mediante javascript puedes añadir clases css a elementos html, de tal forma que cuando se añadan mostrarán su animación, para ello:

var element = document.getElementById("myDIV");
element.classList.add("mystyle");

Sustituye myDiv por el nombre del id que le hayas puesto al elemento html y myStyle por los estilos que quieres que se apliquen, en este caso los de animate.css. Con esto vas a conseguir una animación CSS con efecto de aparecer o de entrada. Puedes lanzar este código cuando se pulse un botón, por ejemplo:

https://codepen.io/Frostq/pen/roeBEm?editors=1111

Aunque en este ejemplo quedaría eliminar las clases CSS tras la animación para que al volver a pulsar el botón se vuelva a reproducir.

Cómo crear animaciones CSS3 básicas de manera manual

animación css ejemplo

Básicamente una animación CSS se define como el la transición gradual de unos estilos a otros en los elementos del html. Es decir, en el CSS vas a poder definir una animación mediante los estilos de partida y los estilos que quieras al final de la animación, y el navegador se va a encargar de hacer el paso de unos estilos a otros de forma gradual.

Para empezar a crear las animaciones, simplemente crea en el CSS una regla especial llamada keyframes. Como pasa en otros programas y lenguajes, los keyframes son una manera de definir puntos en la animación por los que queremos que pase, en este caso punto de partida y punto final tras la animación:

@keyframes ejemplo {
  from {background-color: red;}
  to {background-color: yellow;}
}

En este ejemplo hemos creado una animación llamada ejemplo con dos keyframes. Con el atributo from definimos el punto de partida, en este caso va a tener un fondo rojo, y con el atributo to definimos el punto final, en este caso a color amarillo. Ahora solo te queda aplicar la animación a un elemento mediante una regla especial CSS:

.elemento {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Con animation-name definimos la animación que queremos para este elemento del HTML y con animation-duration cuanto tiempo queremos que dure la animación desde un estado a otro, en este caso 4 segundos. Te dejo el enlace a un ejemplo de animación css sencilla:

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1

Aparte del color de fondo, dentro de los keyframes de las animaciones puedes poner las reglas CSS que quieras, y automáticamente el navegador pasará de un estado a otro.

Como pasaba con animate.css tienes que añadir las clases de los estilos dinámicamente mediante Javascript para que muestre la animación cuando tú quieras.

Otras reglas CSS que puedes aplicar también a las transiciones:

Por ejemplo podemos crear una animación CSS para un botón de la siguiente forma:

https://codepen.io/tinodejong/pen/qZNOwm

Ejemplo de animación CSS para textos

Voy a explicar cómo crear el típico efecto de máquina de escribir con CSS, es decir, que el texto vaya apareciendo poco a poco. Este efecto consta de dos animaciones, una para que vaya apareciendo el texto y la otra para que aparezca el cursor parpadeando infinitamente como si estuviera escribiendo.

En primer lugar se crea un elemento hmtl para renderizar el texto:

<p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>

Ahora se crean las dos animaciones que vas a necesitar para crear el efecto:

@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

La primera animación typewriter, sirve para hacer que el texto se vaya mostrando poco a poco, para ello se crea una animación en el width para que vaya aumentando de tamaño y por tanto muestre el texto con la animación.

La segunda animación sirve para crear el efecto del cursor parpadeante, para ello simplemente se parte de un borde con color y se pasa al mismo borde pero transparente.

Por último se crean los demás estilos y los conectamos con las dos animaciones:

html{
  min-height: 100%;
  overflow: hidden;
}
body{
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family: 'Anonymous Pro', monospace;  
  background-color: rgb(25,25,25);  
}
.line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}

Como ves, se pone overflow: hidden para que lo que haya fuera del contenedor no se vea, y por tanto se produzca el efecto de las letras escribiéndose.

animacion css escribir texto

Te dejo el ejemplo completo para que le eches un vistazo:

https://codepen.io/thiagoteles/pen/ogoxLw

Otras librerías de animaciones CSS

Ahora que sabes crear animaciones CSS manualmente, quizás te interese saber que hay muchas más librerías CSS para que no pierdas el tiempo creando las animaciones manualmente. Echa un vistazo a estas opciones:

Conclusiones

Como ves, si no dominas CSS o simplemente no quieres perder mucho el tiempo configurando animaciones tienes muchas opciones también. Recuerda no saturar todo de animaciones y configúralas para que no duren demasiado para no liar al usuario de tu página web. Si quieres aprender más sobre accesibilidad y buenas prácticas en las animaciones web te dejo este artículo para que complementes con lo que has aprendido:

The ultimate guide to proper use of animation in UX




También te puede intersar...