-
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.
