Cómo realizar animaciones mediante CSS

Hace un mes aproximadamente os comentaba la manera de realizar animaciones semánticas mediante código CSS, que puedes recordar en el siguiente enlace: (animaciones semanticas mediante css) sin embargo, hoy os voy a presentar de manera genérica cómo realizar animaciones mediante CSS para diversos navegadores de una forma sencilla:
En primer lugar, mediante el uso de webkit, en nuestro archivo CSS incorporamos el siguiente código:

@-webkit-keyframes NAME-YOUR-ANIMATION {
        0% {
                font-size: 20px;
        }
        30% {
                font-size: 45px;
        }
        100% {
                font-size: 60px;
        }
}

Donde "NAME-YOUR-ANIMATION" va a ser el nombre que vamos a dar a la animación en sí.
Una vez lo tengamos definido, debemos crear en nuestro código CSS un identificador al mediante el cual vamos a llamar a la animación creada. Cómo por ejemplo:

#box {
     -webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
     -moz-animation:    NAME-YOUR-ANIMATION 5s infinite;
     -ms-animation:     NAME-YOUR-ANIMATION 5s infinite;
}

De esta forma ya tenemos definida nuestra animación indicando la duración de la misma (5s) y el loop que se aplica, que en este caso, será infinito. Ya sólo queda hacer la llamada desde el código html de la forma:

<DIV id="box">Texto animado</DIV> 

Y eso es todo!! Si os fijais, con el movimiento definido hemos conseguido que el texto aumente su tamaño en 3 fases como si de un bizcocho se tratase!! aunque tambien podeis probar con la siguiente animación:

@-webkit-keyframes NAME-YOUR-ANIMATION {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}
@-ms-keyframes NAME-YOUR-ANIMATION {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

Con esto conseguireis que vuestro texto aparezca en pantalla cual fantasma en la ópera!

By worldjam with No comments