Ok, debes estar debatiendo entre usar

"setInterval" o "requestAnimationFrame"

para lo que quieres animar;

pero para continuar, te voy a dar una opción más.

Verás, en Chrome, Firefox y en IE 10+,

en realidad hay una manera de hacer animaciones en CSS,

sin escribir ningún código en JavaScript.

Vamos a poner comentarios en el código que acabamos de escribir,

y probar esto para la animación de "Oh noes".

Pondré un comentario que incluya todas estas líneas.

Comenzaremos por añadir una etiqueta "" a la página,

y luego voy a añadir algo que parece una regla de CSS,

pero en realidad es nuestra definición de la animación.

Así que escribo: "@keyframes" y luego

un nombre para la animación: "getbigger",

y luego pongo unas llaves.

Para hacer una animación simple que vaya de

un estado a otro estado, definiremos "form" y "to".

Dentro de "from" vamos a escribir el estado inicial

de la propiedad de CSS.

Recuerda que lo configuramos en 50px al inicio.

Dentro de "to" vamos a escribir a dónde

debería llegar la propiedad de CSS.

Aquí le ponemos 300px, que es donde terminamos.

¿Recuerdan?

Ahora que hemos definido una animación,

tenemos que decirle al navegador qué elemento

debe usar para esta animación.

Así que en realidad voy a añadir una regla normal de CSS

para "Oh noes".

Y aquí dentro voy a especificar el nombre de la animación,

que es "getbigger",

y luego la duración de la animación,

tres segundos.

Dependiendo de qué navegador estén usando,

algunos de ustedes estarán pensando:

¡Wow! ¡Genial, funciona!

Sin embargo, en otros navegadores, como Safari o Chrome,

probablemente no esté funcionando.

Esto se debe a lo que se llama "vendor prefixes", (prefijos de fabricante).

Algunas veces, el navegador decide

implementar una nueva característica,

pero el fabricante pone un prefijo a esa característica,

para indicar que podría cambiar más tarde.

Es sólo un acercamiento del navegador a esa característica.

Para hacer que esto funcione en Chrome,

si es que todavía no lo hace, tenemos que replicar

todo lo que hicimos antes,

y ponerle "-webkit-" aquí adelante.

Así que tenemos que replicar esta parte,

y poner "-webkit-" aquí.

Y luego aquí, replicaremos esto, y ponemos "-webkit-", "-webkit-",

¡Wow, bien!

Ahora se hace grande en todos los navegadores.

Esperemos que para el momento en que veas esta guía paso a paso,

los prefijos ya no sean necesarios,

pero es bueno que sepas que existen,

porque tal vez tengas que usarlos algún día

para alguna otra característica.

Hay una manera más en CSS de hacer animaciones,

y es mediante la propiedad "transition".

Esta propiedad le dice al navegador cómo hacer una transición suavemente,

de una propiedad a la siguiente.

Digamos que queremos que el tamaño de la fuente

del tiempo que queda, se haga más grande,

cuando pasas el ratón por encima.

Podríamos hacer eso en JavaScript,

asignando un detector de eventos, para el evento "mouse over"

y luego usar "requestAnimationFrame".

para incrementar la propiedad de tamaño de la fuente cada vez,

pero también podemos hacer todo eso usando solamente CSS.

Vamos a pensar, ¿cómo podríamos cambiar

el tamaño de la fuente de manera normal,

para que sea más grande, cuando pasas por encima, usando CSS?

Podemos hacerlo con una regla "hover".

Escribimos "#countdown:hover,"

y luego, "font-size: 150px".

Ok, y ahora sólo le tenemos que decir al navegador,

que haga la transición en la propiedad de tamaño de la fuente,

en cuánto tiempo debe hacer la transición y

qué función de tiempo usar.

Así que le decimos: "transition: font-size 1s linear;".

Ahora, deberías pausar la guía paso a paso,

tratar de pasar el ratón sobre el texto y ver qué pasa.

Si estás usando Chrome, Firefox o IE 10+,

deberías ver que se hace grande suavemente.

Y no necesitas ningún prefijo de fabricante para esta técnica.

Hay mucho más que puedes hacer

con animaciones y transiciones en CSS,

y los navegadores son muy buenos para reproducirlas rápidamente.

Así que te animo a que las explores a profundidad.