[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.03,0:00:03.94,Default,,0000,0000,0000,,Ok, debes estar debatiendo entre usar
Dialogue: 0,0:00:03.94,0:00:06.98,Default,,0000,0000,0000,,"setInterval" o "requestAnimationFrame"
Dialogue: 0,0:00:06.98,0:00:08.58,Default,,0000,0000,0000,,para lo que quieres animar;
Dialogue: 0,0:00:08.58,0:00:12.61,Default,,0000,0000,0000,,pero para continuar, te voy a dar una opción más.
Dialogue: 0,0:00:13.55,0:00:16.84,Default,,0000,0000,0000,,Verás, en Chrome, Firefox y en IE 10+,
Dialogue: 0,0:00:16.84,0:00:21.13,Default,,0000,0000,0000,,en realidad hay una manera de hacer animaciones en CSS,
Dialogue: 0,0:00:21.13,0:00:24.65,Default,,0000,0000,0000,,sin escribir ningún código en JavaScript.
Dialogue: 0,0:00:24.65,0:00:27.54,Default,,0000,0000,0000,,Vamos a poner comentarios en el código que acabamos de escribir,
Dialogue: 0,0:00:27.54,0:00:30.63,Default,,0000,0000,0000,,y probar esto para la animación de "Oh noes".
Dialogue: 0,0:00:30.63,0:00:35.68,Default,,0000,0000,0000,,Pondré un comentario que incluya todas estas líneas.
Dialogue: 0,0:00:36.67,0:00:40.68,Default,,0000,0000,0000,,Comenzaremos por añadir una etiqueta "" a la página,
Dialogue: 0,0:00:40.68,0:00:44.56,Default,,0000,0000,0000,,y luego voy a añadir algo que parece una regla de CSS,
Dialogue: 0,0:00:44.56,0:00:47.90,Default,,0000,0000,0000,,pero en realidad es nuestra definición de la animación.
Dialogue: 0,0:00:47.90,0:00:50.90,Default,,0000,0000,0000,,Así que escribo: "@keyframes" y luego
Dialogue: 0,0:00:50.90,0:00:54.45,Default,,0000,0000,0000,,un nombre para la animación: "getbigger",
Dialogue: 0,0:00:54.45,0:00:57.06,Default,,0000,0000,0000,,y luego pongo unas llaves.
Dialogue: 0,0:00:57.06,0:00:59.68,Default,,0000,0000,0000,,Para hacer una animación simple que vaya de
Dialogue: 0,0:00:59.68,0:01:06.62,Default,,0000,0000,0000,,un estado a otro estado, definiremos "form" y "to".
Dialogue: 0,0:01:07.08,0:01:10.50,Default,,0000,0000,0000,,Dentro de "from" vamos a escribir el estado inicial
Dialogue: 0,0:01:10.50,0:01:12.41,Default,,0000,0000,0000,,de la propiedad de CSS.
Dialogue: 0,0:01:12.41,0:01:15.93,Default,,0000,0000,0000,,Recuerda que lo configuramos en 50px al inicio.
Dialogue: 0,0:01:15.93,0:01:18.62,Default,,0000,0000,0000,,Dentro de "to" vamos a escribir a dónde
Dialogue: 0,0:01:18.62,0:01:21.11,Default,,0000,0000,0000,,debería llegar la propiedad de CSS.
Dialogue: 0,0:01:21.11,0:01:24.52,Default,,0000,0000,0000,,Aquí le ponemos 300px, que es donde terminamos.
Dialogue: 0,0:01:24.52,0:01:26.05,Default,,0000,0000,0000,,¿Recuerdan?
Dialogue: 0,0:01:26.05,0:01:28.36,Default,,0000,0000,0000,,Ahora que hemos definido una animación,
Dialogue: 0,0:01:28.36,0:01:30.82,Default,,0000,0000,0000,,tenemos que decirle al navegador qué elemento
Dialogue: 0,0:01:30.82,0:01:33.33,Default,,0000,0000,0000,,debe usar para esta animación.
Dialogue: 0,0:01:33.33,0:01:36.30,Default,,0000,0000,0000,,Así que en realidad voy a añadir una regla normal de CSS
Dialogue: 0,0:01:36.30,0:01:38.74,Default,,0000,0000,0000,,para "Oh noes".
Dialogue: 0,0:01:38.74,0:01:44.24,Default,,0000,0000,0000,,Y aquí dentro voy a especificar el nombre de la animación,
Dialogue: 0,0:01:44.24,0:01:47.36,Default,,0000,0000,0000,,que es "getbigger",
Dialogue: 0,0:01:47.36,0:01:50.70,Default,,0000,0000,0000,,y luego la duración de la animación,
Dialogue: 0,0:01:50.70,0:01:53.07,Default,,0000,0000,0000,,tres segundos.
Dialogue: 0,0:01:53.07,0:01:55.08,Default,,0000,0000,0000,,Dependiendo de qué navegador estén usando,
Dialogue: 0,0:01:55.08,0:01:56.61,Default,,0000,0000,0000,,algunos de ustedes estarán pensando:
Dialogue: 0,0:01:56.61,0:01:58.65,Default,,0000,0000,0000,,¡Wow! ¡Genial, funciona!
Dialogue: 0,0:01:58.65,0:02:01.46,Default,,0000,0000,0000,,Sin embargo, en otros navegadores, como Safari o Chrome,
Dialogue: 0,0:02:01.46,0:02:03.32,Default,,0000,0000,0000,,probablemente no esté funcionando.
Dialogue: 0,0:02:03.33,0:02:09.55,Default,,0000,0000,0000,,Esto se debe a lo que se llama "vendor prefixes", (prefijos de fabricante).
Dialogue: 0,0:02:09.55,0:02:13.56,Default,,0000,0000,0000,,Algunas veces, el navegador decide
Dialogue: 0,0:02:13.56,0:02:16.02,Default,,0000,0000,0000,,implementar una nueva característica,
Dialogue: 0,0:02:16.02,0:02:19.27,Default,,0000,0000,0000,,pero el fabricante pone un prefijo a esa característica,
Dialogue: 0,0:02:19.27,0:02:21.73,Default,,0000,0000,0000,,para indicar que podría cambiar más tarde.
Dialogue: 0,0:02:21.73,0:02:25.80,Default,,0000,0000,0000,,Es sólo un acercamiento del navegador a esa característica.
Dialogue: 0,0:02:25.80,0:02:28.06,Default,,0000,0000,0000,,Para hacer que esto funcione en Chrome,
Dialogue: 0,0:02:28.06,0:02:30.24,Default,,0000,0000,0000,,si es que todavía no lo hace, tenemos que replicar
Dialogue: 0,0:02:30.24,0:02:31.85,Default,,0000,0000,0000,,todo lo que hicimos antes,
Dialogue: 0,0:02:31.85,0:02:34.50,Default,,0000,0000,0000,,y ponerle "-webkit-" aquí adelante.
Dialogue: 0,0:02:34.50,0:02:37.94,Default,,0000,0000,0000,,Así que tenemos que replicar esta parte,
Dialogue: 0,0:02:37.94,0:02:41.45,Default,,0000,0000,0000,,y poner "-webkit-" aquí.
Dialogue: 0,0:02:41.45,0:02:49.81,Default,,0000,0000,0000,,Y luego aquí, replicaremos esto, y ponemos "-webkit-", "-webkit-",
Dialogue: 0,0:02:49.81,0:02:51.53,Default,,0000,0000,0000,,¡Wow, bien!
Dialogue: 0,0:02:51.53,0:02:55.32,Default,,0000,0000,0000,,Ahora se hace grande en todos los navegadores.
Dialogue: 0,0:02:55.32,0:02:58.01,Default,,0000,0000,0000,,Esperemos que para el momento en que veas esta guía paso a paso,
Dialogue: 0,0:02:58.01,0:03:00.06,Default,,0000,0000,0000,,los prefijos ya no sean necesarios,
Dialogue: 0,0:03:00.06,0:03:02.21,Default,,0000,0000,0000,,pero es bueno que sepas que existen,
Dialogue: 0,0:03:02.21,0:03:04.68,Default,,0000,0000,0000,,porque tal vez tengas que usarlos algún día
Dialogue: 0,0:03:04.68,0:03:07.77,Default,,0000,0000,0000,,para alguna otra característica.
Dialogue: 0,0:03:07.77,0:03:11.42,Default,,0000,0000,0000,,Hay una manera más en CSS de hacer animaciones,
Dialogue: 0,0:03:11.42,0:03:14.54,Default,,0000,0000,0000,,y es mediante la propiedad "transition".
Dialogue: 0,0:03:14.54,0:03:17.97,Default,,0000,0000,0000,,Esta propiedad le dice al navegador cómo hacer una transición suavemente,
Dialogue: 0,0:03:17.97,0:03:20.35,Default,,0000,0000,0000,,de una propiedad a la siguiente.
Dialogue: 0,0:03:20.35,0:03:23.08,Default,,0000,0000,0000,,Digamos que queremos que el tamaño de la fuente
Dialogue: 0,0:03:23.08,0:03:26.48,Default,,0000,0000,0000,,del tiempo que queda, se haga más grande,
Dialogue: 0,0:03:26.48,0:03:28.29,Default,,0000,0000,0000,,cuando pasas el ratón por encima.
Dialogue: 0,0:03:28.29,0:03:30.23,Default,,0000,0000,0000,,Podríamos hacer eso en JavaScript,
Dialogue: 0,0:03:30.23,0:03:33.29,Default,,0000,0000,0000,,asignando un detector de eventos, para el evento "mouse over"
Dialogue: 0,0:03:33.29,0:03:34.91,Default,,0000,0000,0000,,y luego usar "requestAnimationFrame".
Dialogue: 0,0:03:34.91,0:03:37.33,Default,,0000,0000,0000,,para incrementar la propiedad de tamaño de la fuente cada vez,
Dialogue: 0,0:03:37.33,0:03:41.81,Default,,0000,0000,0000,,pero también podemos hacer todo eso usando solamente CSS.
Dialogue: 0,0:03:41.81,0:03:44.34,Default,,0000,0000,0000,,Vamos a pensar, ¿cómo podríamos cambiar
Dialogue: 0,0:03:44.34,0:03:46.52,Default,,0000,0000,0000,,el tamaño de la fuente de manera normal,
Dialogue: 0,0:03:46.52,0:03:48.74,Default,,0000,0000,0000,,para que sea más grande, cuando pasas por encima, usando CSS?
Dialogue: 0,0:03:48.74,0:03:50.75,Default,,0000,0000,0000,,Podemos hacerlo con una regla "hover".
Dialogue: 0,0:03:50.75,0:03:54.06,Default,,0000,0000,0000,,Escribimos "#countdown:hover,"
Dialogue: 0,0:03:54.06,0:03:59.61,Default,,0000,0000,0000,,y luego, "font-size: 150px".
Dialogue: 0,0:03:59.61,0:04:02.61,Default,,0000,0000,0000,,Ok, y ahora sólo le tenemos que decir al navegador,
Dialogue: 0,0:04:02.61,0:04:06.30,Default,,0000,0000,0000,,que haga la transición en la propiedad de tamaño de la fuente,
Dialogue: 0,0:04:06.30,0:04:08.87,Default,,0000,0000,0000,,en cuánto tiempo debe hacer la transición y
Dialogue: 0,0:04:08.87,0:04:11.14,Default,,0000,0000,0000,,qué función de tiempo usar.
Dialogue: 0,0:04:11.14,0:04:19.24,Default,,0000,0000,0000,,Así que le decimos: "transition: font-size 1s linear;".
Dialogue: 0,0:04:19.24,0:04:21.85,Default,,0000,0000,0000,,Ahora, deberías pausar la guía paso a paso,
Dialogue: 0,0:04:21.85,0:04:25.64,Default,,0000,0000,0000,,tratar de pasar el ratón sobre el texto y ver qué pasa.
Dialogue: 0,0:04:25.64,0:04:28.52,Default,,0000,0000,0000,,Si estás usando Chrome, Firefox o IE 10+,
Dialogue: 0,0:04:28.52,0:04:31.14,Default,,0000,0000,0000,,deberías ver que se hace grande suavemente.
Dialogue: 0,0:04:31.14,0:04:35.56,Default,,0000,0000,0000,,Y no necesitas ningún prefijo de fabricante para esta técnica.
Dialogue: 0,0:04:35.56,0:04:37.56,Default,,0000,0000,0000,,Hay mucho más que puedes hacer
Dialogue: 0,0:04:37.56,0:04:39.36,Default,,0000,0000,0000,,con animaciones y transiciones en CSS,
Dialogue: 0,0:04:39.36,0:04:42.13,Default,,0000,0000,0000,,y los navegadores son muy buenos para reproducirlas rápidamente.
Dialogue: 0,0:04:42.13,0:04:45.43,Default,,0000,0000,0000,,Así que te animo a que las explores a profundidad.