WEBVTT

00:00:01.031 --> 00:00:03.942
Ok, debes estar debatiendo entre usar

00:00:03.942 --> 00:00:06.975
"setInterval" o "requestAnimationFrame"

00:00:06.975 --> 00:00:08.575
para lo que quieres animar;

00:00:08.578 --> 00:00:12.611
pero para continuar, te voy a dar una opción más.

00:00:13.553 --> 00:00:16.844
Verás, en Chrome, Firefox y en IE 10+,

00:00:16.844 --> 00:00:21.133
en realidad hay una manera de hacer animaciones en CSS,

00:00:21.133 --> 00:00:24.653
sin escribir ningún código en JavaScript.

00:00:24.653 --> 00:00:27.537
Vamos a poner comentarios en el código que acabamos de escribir,

00:00:27.537 --> 00:00:30.631
y probar esto para la animación de "Oh noes".

00:00:30.631 --> 00:00:35.681
Pondré un comentario que incluya todas estas líneas.

00:00:36.667 --> 00:00:40.684
Comenzaremos por añadir una etiqueta "" a la página,

00:00:40.684 --> 00:00:44.564
y luego voy a añadir algo que parece una regla de CSS,

00:00:44.564 --> 00:00:47.904
pero en realidad es nuestra definición de la animación.

00:00:47.904 --> 00:00:50.898
Así que escribo: "@keyframes" y luego

00:00:50.898 --> 00:00:54.446
un nombre para la animación: "getbigger",

00:00:54.446 --> 00:00:57.060
y luego pongo unas llaves.

00:00:57.060 --> 00:00:59.685
Para hacer una animación simple que vaya de

00:00:59.685 --> 00:01:06.621
un estado a otro estado, definiremos "form" y "to".

00:01:07.081 --> 00:01:10.503
Dentro de "from" vamos a escribir el estado inicial

00:01:10.503 --> 00:01:12.413
de la propiedad de CSS.

00:01:12.413 --> 00:01:15.927
Recuerda que lo configuramos en 50px al inicio.

00:01:15.927 --> 00:01:18.616
Dentro de "to" vamos a escribir a dónde

00:01:18.616 --> 00:01:21.113
debería llegar la propiedad de CSS.

00:01:21.113 --> 00:01:24.517
Aquí le ponemos 300px, que es donde terminamos.

00:01:24.517 --> 00:01:26.047
¿Recuerdan?

00:01:26.048 --> 00:01:28.355
Ahora que hemos definido una animación,

00:01:28.355 --> 00:01:30.816
tenemos que decirle al navegador qué elemento

00:01:30.816 --> 00:01:33.329
debe usar para esta animación.

00:01:33.329 --> 00:01:36.301
Así que en realidad voy a añadir una regla normal de CSS

00:01:36.301 --> 00:01:38.741
para "Oh noes".

00:01:38.741 --> 00:01:44.241
Y aquí dentro voy a especificar el nombre de la animación,

00:01:44.241 --> 00:01:47.362
que es "getbigger",

00:01:47.362 --> 00:01:50.700
y luego la duración de la animación,

00:01:50.700 --> 00:01:53.067
tres segundos.

00:01:53.067 --> 00:01:55.082
Dependiendo de qué navegador estén usando,

00:01:55.082 --> 00:01:56.614
algunos de ustedes estarán pensando:

00:01:56.614 --> 00:01:58.646
¡Wow! ¡Genial, funciona!

00:01:58.646 --> 00:02:01.465
Sin embargo, en otros navegadores, como Safari o Chrome,

00:02:01.465 --> 00:02:03.315
probablemente no esté funcionando.

00:02:03.331 --> 00:02:09.551
Esto se debe a lo que se llama "vendor prefixes", (prefijos de fabricante).

00:02:09.554 --> 00:02:13.557
Algunas veces, el navegador decide

00:02:13.557 --> 00:02:16.019
implementar una nueva característica,

00:02:16.019 --> 00:02:19.266
pero el fabricante pone un prefijo a esa característica,

00:02:19.266 --> 00:02:21.729
para indicar que podría cambiar más tarde.

00:02:21.729 --> 00:02:25.801
Es sólo un acercamiento del navegador a esa característica.

00:02:25.801 --> 00:02:28.059
Para hacer que esto funcione en Chrome,

00:02:28.059 --> 00:02:30.238
si es que todavía no lo hace, tenemos que replicar

00:02:30.238 --> 00:02:31.851
todo lo que hicimos antes,

00:02:31.851 --> 00:02:34.503
y ponerle "-webkit-" aquí adelante.

00:02:34.503 --> 00:02:37.944
Así que tenemos que replicar esta parte,

00:02:37.944 --> 00:02:41.449
y poner "-webkit-" aquí.

00:02:41.449 --> 00:02:49.814
Y luego aquí, replicaremos esto, y ponemos "-webkit-", "-webkit-",

00:02:49.814 --> 00:02:51.533
¡Wow, bien!

00:02:51.533 --> 00:02:55.320
Ahora se hace grande en todos los navegadores.

00:02:55.320 --> 00:02:58.009
Esperemos que para el momento en que veas esta guía paso a paso,

00:02:58.009 --> 00:03:00.057
los prefijos ya no sean necesarios,

00:03:00.057 --> 00:03:02.214
pero es bueno que sepas que existen,

00:03:02.214 --> 00:03:04.675
porque tal vez tengas que usarlos algún día

00:03:04.675 --> 00:03:07.770
para alguna otra característica.

00:03:07.770 --> 00:03:11.421
Hay una manera más en CSS de hacer animaciones,

00:03:11.421 --> 00:03:14.545
y es mediante la propiedad "transition".

00:03:14.545 --> 00:03:17.966
Esta propiedad le dice al navegador cómo hacer una transición suavemente,

00:03:17.966 --> 00:03:20.346
de una propiedad a la siguiente.

00:03:20.346 --> 00:03:23.076
Digamos que queremos que el tamaño de la fuente

00:03:23.076 --> 00:03:26.476
del tiempo que queda, se haga más grande,

00:03:26.479 --> 00:03:28.290
cuando pasas el ratón por encima.

00:03:28.290 --> 00:03:30.229
Podríamos hacer eso en JavaScript,

00:03:30.229 --> 00:03:33.293
asignando un detector de eventos, para el evento "mouse over"

00:03:33.293 --> 00:03:34.910
y luego usar "requestAnimationFrame".

00:03:34.910 --> 00:03:37.330
para incrementar la propiedad de tamaño de la fuente cada vez,

00:03:37.330 --> 00:03:41.808
pero también podemos hacer todo eso usando solamente CSS.

00:03:41.808 --> 00:03:44.336
Vamos a pensar, ¿cómo podríamos cambiar

00:03:44.336 --> 00:03:46.523
el tamaño de la fuente de manera normal,

00:03:46.523 --> 00:03:48.744
para que sea más grande, cuando pasas por encima, usando CSS?

00:03:48.744 --> 00:03:50.747
Podemos hacerlo con una regla "hover".

00:03:50.747 --> 00:03:54.058
Escribimos "#countdown:hover,"

00:03:54.058 --> 00:03:59.608
y luego, "font-size: 150px".

00:03:59.608 --> 00:04:02.609
Ok, y ahora sólo le tenemos que decir al navegador,

00:04:02.609 --> 00:04:06.295
que haga la transición en la propiedad de tamaño de la fuente,

00:04:06.295 --> 00:04:08.871
en cuánto tiempo debe hacer la transición y

00:04:08.871 --> 00:04:11.135
qué función de tiempo usar.

00:04:11.135 --> 00:04:19.245
Así que le decimos: "transition: font-size 1s linear;".

00:04:19.245 --> 00:04:21.854
Ahora, deberías pausar la guía paso a paso,

00:04:21.854 --> 00:04:25.643
tratar de pasar el ratón sobre el texto y ver qué pasa.

00:04:25.643 --> 00:04:28.525
Si estás usando Chrome, Firefox o IE 10+,

00:04:28.525 --> 00:04:31.144
deberías ver que se hace grande suavemente.

00:04:31.144 --> 00:04:35.560
Y no necesitas ningún prefijo de fabricante para esta técnica.

00:04:35.560 --> 00:04:37.564
Hay mucho más que puedes hacer

00:04:37.564 --> 00:04:39.364
con animaciones y transiciones en CSS,

00:04:39.364 --> 00:04:42.130
y los navegadores son muy buenos para reproducirlas rápidamente.

00:04:42.130 --> 00:04:45.430
Así que te animo a que las explores a profundidad.