Da vida a tu diseño web con animaciones CSS

Gracias a la propiedad de @keyframes de CSS 3 se pueden crear animaciones de diseño web en los últimos navegadores. Para los usuarios que no dispongan de un navegador moderno, aclaro que podrán ven el elemento pero sin la animación.

Lo primero que tenemos que hacer es añadir los estilos al diseño web de nuestra página, para ello tan solo debemos introducir la siguiente línea de código en nuestro.


Con esta linea estamos añadiendo los estilo de las animaciones a nuestra página.


Tenemos que añadir la clase de la animación al elemento que queramos animar. En este caso podemos cambiar desde abajo por la animación que deseamos aplicar.

Ten en cuenta que un elemento del diseño web puede tener varias clases en este caso se deberán añadir separadas por un espacio.

En caso que el elemento tenga más de una clase. #objeto{ visibility: hidden; } Los elementos en un principio deben tener propiedad de CSS visibility con el valor hidden, de esta forma luego aparecerá en la pantalla con la animación seleccionada. Para añadir la clase con las animaciones CSS usaremos JavaScript. Podemos hacer que la nueva clase con las animaciones se establezca en dos ocasiones. Una cuando el elemento este a punto de aparecer en pantalla y otra al hacer clic. Para añadir la clase al hacer clic añadiremos el siguiente código JavaScript:

<script>
$(‘#elementoanimado‘).click(function() {
$(this).addClass(“desdearriba“);
});
</script>
Sustituye elementoanimado por el elemento que quieras añadir la clase.
Sustituye desdearriba por la clase con la animación que desees.

En cambio para añadir la clase cuando el elemento aparezca en la pantalla es el siguiente código:

<script>
 $(window).scroll(function() {
       $('#elementoanimado').each(function(){
       var imagePos = $(this).offset().top;

       var topOfWindow = $(window).scrollTop();
              if (imagePos < topOfWindow+400) {
              $(this).addClass("desdearriba");
              }
       });
 });
</script>
Sustituye elementoanimado por el elemento que quieras añadir la clase.
Sustituye desdearriba por la clase con la animación que desees.
400 es la distancia desde a la parte superior de la pantalla hasta el elemento con animación. Para atrasar la animación en el diseño web solo incrementa este número.