0:00:01.031,0:00:03.942 Ok, debes estar debatiendo entre usar 0:00:03.942,0:00:06.975 "setInterval" o "requestAnimationFrame" 0:00:06.975,0:00:08.575 para lo que quieres animar; 0:00:08.578,0:00:12.611 pero para continuar, te voy a dar una opción más. 0:00:13.553,0:00:16.844 Verás, en Chrome, Firefox y en IE 10+, 0:00:16.844,0:00:21.133 en realidad hay una manera de hacer animaciones en CSS, 0:00:21.133,0:00:24.653 sin escribir ningún código en JavaScript. 0:00:24.653,0:00:27.537 Vamos a poner comentarios en el código que acabamos de escribir, 0:00:27.537,0:00:30.631 y probar esto para la animación de "Oh noes". 0:00:30.631,0:00:35.681 Pondré un comentario que incluya todas estas líneas. 0:00:36.667,0:00:40.684 Comenzaremos por añadir una etiqueta "" a la página, 0:00:40.684,0:00:44.564 y luego voy a añadir algo que parece una regla de CSS, 0:00:44.564,0:00:47.904 pero en realidad es nuestra definición de la animación. 0:00:47.904,0:00:50.898 Así que escribo: "@keyframes" y luego 0:00:50.898,0:00:54.446 un nombre para la animación: "getbigger", 0:00:54.446,0:00:57.060 y luego pongo unas llaves. 0:00:57.060,0:00:59.685 Para hacer una animación simple que vaya de 0:00:59.685,0:01:06.621 un estado a otro estado, definiremos "form" y "to". 0:01:07.081,0:01:10.503 Dentro de "from" vamos a escribir el estado inicial 0:01:10.503,0:01:12.413 de la propiedad de CSS. 0:01:12.413,0:01:15.927 Recuerda que lo configuramos en 50px al inicio. 0:01:15.927,0:01:18.616 Dentro de "to" vamos a escribir a dónde 0:01:18.616,0:01:21.113 debería llegar la propiedad de CSS. 0:01:21.113,0:01:24.517 Aquí le ponemos 300px, que es donde terminamos. 0:01:24.517,0:01:26.047 ¿Recuerdan? 0:01:26.048,0:01:28.355 Ahora que hemos definido una animación, 0:01:28.355,0:01:30.816 tenemos que decirle al navegador qué elemento 0:01:30.816,0:01:33.329 debe usar para esta animación. 0:01:33.329,0:01:36.301 Así que en realidad voy a añadir una regla normal de CSS 0:01:36.301,0:01:38.741 para "Oh noes". 0:01:38.741,0:01:44.241 Y aquí dentro voy a especificar el nombre de la animación, 0:01:44.241,0:01:47.362 que es "getbigger", 0:01:47.362,0:01:50.700 y luego la duración de la animación, 0:01:50.700,0:01:53.067 tres segundos. 0:01:53.067,0:01:55.082 Dependiendo de qué navegador estén usando, 0:01:55.082,0:01:56.614 algunos de ustedes estarán pensando: 0:01:56.614,0:01:58.646 ¡Wow! ¡Genial, funciona! 0:01:58.646,0:02:01.465 Sin embargo, en otros navegadores, como Safari o Chrome, 0:02:01.465,0:02:03.315 probablemente no esté funcionando. 0:02:03.331,0:02:09.551 Esto se debe a lo que se llama "vendor prefixes", (prefijos de fabricante). 0:02:09.554,0:02:13.557 Algunas veces, el navegador decide 0:02:13.557,0:02:16.019 implementar una nueva característica, 0:02:16.019,0:02:19.266 pero el fabricante pone un prefijo a esa característica, 0:02:19.266,0:02:21.729 para indicar que podría cambiar más tarde. 0:02:21.729,0:02:25.801 Es sólo un acercamiento del navegador a esa característica. 0:02:25.801,0:02:28.059 Para hacer que esto funcione en Chrome, 0:02:28.059,0:02:30.238 si es que todavía no lo hace, tenemos que replicar 0:02:30.238,0:02:31.851 todo lo que hicimos antes, 0:02:31.851,0:02:34.503 y ponerle "-webkit-" aquí adelante. 0:02:34.503,0:02:37.944 Así que tenemos que replicar esta parte, 0:02:37.944,0:02:41.449 y poner "-webkit-" aquí. 0:02:41.449,0:02:49.814 Y luego aquí, replicaremos esto, y ponemos "-webkit-", "-webkit-", 0:02:49.814,0:02:51.533 ¡Wow, bien! 0:02:51.533,0:02:55.320 Ahora se hace grande en todos los navegadores. 0:02:55.320,0:02:58.009 Esperemos que para el momento en que veas esta guía paso a paso, 0:02:58.009,0:03:00.057 los prefijos ya no sean necesarios, 0:03:00.057,0:03:02.214 pero es bueno que sepas que existen, 0:03:02.214,0:03:04.675 porque tal vez tengas que usarlos algún día 0:03:04.675,0:03:07.770 para alguna otra característica. 0:03:07.770,0:03:11.421 Hay una manera más en CSS de hacer animaciones, 0:03:11.421,0:03:14.545 y es mediante la propiedad "transition". 0:03:14.545,0:03:17.966 Esta propiedad le dice al navegador cómo hacer una transición suavemente, 0:03:17.966,0:03:20.346 de una propiedad a la siguiente. 0:03:20.346,0:03:23.076 Digamos que queremos que el tamaño de la fuente 0:03:23.076,0:03:26.476 del tiempo que queda, se haga más grande, 0:03:26.479,0:03:28.290 cuando pasas el ratón por encima. 0:03:28.290,0:03:30.229 Podríamos hacer eso en JavaScript, 0:03:30.229,0:03:33.293 asignando un detector de eventos, para el evento "mouse over" 0:03:33.293,0:03:34.910 y luego usar "requestAnimationFrame". 0:03:34.910,0:03:37.330 para incrementar la propiedad de tamaño de la fuente cada vez, 0:03:37.330,0:03:41.808 pero también podemos hacer todo eso usando solamente CSS. 0:03:41.808,0:03:44.336 Vamos a pensar, ¿cómo podríamos cambiar 0:03:44.336,0:03:46.523 el tamaño de la fuente de manera normal, 0:03:46.523,0:03:48.744 para que sea más grande, cuando pasas por encima, usando CSS? 0:03:48.744,0:03:50.747 Podemos hacerlo con una regla "hover". 0:03:50.747,0:03:54.058 Escribimos "#countdown:hover," 0:03:54.058,0:03:59.608 y luego, "font-size: 150px". 0:03:59.608,0:04:02.609 Ok, y ahora sólo le tenemos que decir al navegador, 0:04:02.609,0:04:06.295 que haga la transición en la propiedad de tamaño de la fuente, 0:04:06.295,0:04:08.871 en cuánto tiempo debe hacer la transición y 0:04:08.871,0:04:11.135 qué función de tiempo usar. 0:04:11.135,0:04:19.245 Así que le decimos: "transition: font-size 1s linear;". 0:04:19.245,0:04:21.854 Ahora, deberías pausar la guía paso a paso, 0:04:21.854,0:04:25.643 tratar de pasar el ratón sobre el texto y ver qué pasa. 0:04:25.643,0:04:28.525 Si estás usando Chrome, Firefox o IE 10+, 0:04:28.525,0:04:31.144 deberías ver que se hace grande suavemente. 0:04:31.144,0:04:35.560 Y no necesitas ningún prefijo de fabricante para esta técnica. 0:04:35.560,0:04:37.564 Hay mucho más que puedes hacer 0:04:37.564,0:04:39.364 con animaciones y transiciones en CSS, 0:04:39.364,0:04:42.130 y los navegadores son muy buenos para reproducirlas rápidamente. 0:04:42.130,0:04:45.430 Así que te animo a que las explores a profundidad.