1
00:00:01,031 --> 00:00:03,942
Ok, debes estar debatiendo entre usar

2
00:00:03,942 --> 00:00:06,975
"setInterval" o "requestAnimationFrame"

3
00:00:06,975 --> 00:00:08,575
para lo que quieres animar;

4
00:00:08,578 --> 00:00:12,611
pero para continuar, te voy a dar una opción más.

5
00:00:13,553 --> 00:00:16,844
Verás, en Chrome, Firefox y en IE 10+,

6
00:00:16,844 --> 00:00:21,133
en realidad hay una manera de hacer animaciones en CSS,

7
00:00:21,133 --> 00:00:24,653
sin escribir ningún código en JavaScript.

8
00:00:24,653 --> 00:00:27,537
Vamos a poner comentarios en el código que acabamos de escribir,

9
00:00:27,537 --> 00:00:30,631
y probar esto para la animación de "Oh noes".

10
00:00:30,631 --> 00:00:35,681
Pondré un comentario que incluya todas estas líneas.

11
00:00:36,667 --> 00:00:40,684
Comenzaremos por añadir una etiqueta "" a la página,

12
00:00:40,684 --> 00:00:44,564
y luego voy a añadir algo que parece una regla de CSS,

13
00:00:44,564 --> 00:00:47,904
pero en realidad es nuestra definición de la animación.

14
00:00:47,904 --> 00:00:50,898
Así que escribo: "@keyframes" y luego

15
00:00:50,898 --> 00:00:54,446
un nombre para la animación: "getbigger",

16
00:00:54,446 --> 00:00:57,060
y luego pongo unas llaves.

17
00:00:57,060 --> 00:00:59,685
Para hacer una animación simple que vaya de

18
00:00:59,685 --> 00:01:06,621
un estado a otro estado, definiremos "form" y "to".

19
00:01:07,081 --> 00:01:10,503
Dentro de "from" vamos a escribir el estado inicial

20
00:01:10,503 --> 00:01:12,413
de la propiedad de CSS.

21
00:01:12,413 --> 00:01:15,927
Recuerda que lo configuramos en 50px al inicio.

22
00:01:15,927 --> 00:01:18,616
Dentro de "to" vamos a escribir a dónde

23
00:01:18,616 --> 00:01:21,113
debería llegar la propiedad de CSS.

24
00:01:21,113 --> 00:01:24,517
Aquí le ponemos 300px, que es donde terminamos.

25
00:01:24,517 --> 00:01:26,047
¿Recuerdan?

26
00:01:26,048 --> 00:01:28,355
Ahora que hemos definido una animación,

27
00:01:28,355 --> 00:01:30,816
tenemos que decirle al navegador qué elemento

28
00:01:30,816 --> 00:01:33,329
debe usar para esta animación.

29
00:01:33,329 --> 00:01:36,301
Así que en realidad voy a añadir una regla normal de CSS

30
00:01:36,301 --> 00:01:38,741
para "Oh noes".

31
00:01:38,741 --> 00:01:44,241
Y aquí dentro voy a especificar el nombre de la animación,

32
00:01:44,241 --> 00:01:47,362
que es "getbigger",

33
00:01:47,362 --> 00:01:50,700
y luego la duración de la animación,

34
00:01:50,700 --> 00:01:53,067
tres segundos.

35
00:01:53,067 --> 00:01:55,082
Dependiendo de qué navegador estén usando,

36
00:01:55,082 --> 00:01:56,614
algunos de ustedes estarán pensando:

37
00:01:56,614 --> 00:01:58,646
¡Wow! ¡Genial, funciona!

38
00:01:58,646 --> 00:02:01,465
Sin embargo, en otros navegadores, como Safari o Chrome,

39
00:02:01,465 --> 00:02:03,315
probablemente no esté funcionando.

40
00:02:03,331 --> 00:02:09,551
Esto se debe a lo que se llama "vendor prefixes", (prefijos de fabricante).

41
00:02:09,554 --> 00:02:13,557
Algunas veces, el navegador decide

42
00:02:13,557 --> 00:02:16,019
implementar una nueva característica,

43
00:02:16,019 --> 00:02:19,266
pero el fabricante pone un prefijo a esa característica,

44
00:02:19,266 --> 00:02:21,729
para indicar que podría cambiar más tarde.

45
00:02:21,729 --> 00:02:25,801
Es sólo un acercamiento del navegador a esa característica.

46
00:02:25,801 --> 00:02:28,059
Para hacer que esto funcione en Chrome,

47
00:02:28,059 --> 00:02:30,238
si es que todavía no lo hace, tenemos que replicar

48
00:02:30,238 --> 00:02:31,851
todo lo que hicimos antes,

49
00:02:31,851 --> 00:02:34,503
y ponerle "-webkit-" aquí adelante.

50
00:02:34,503 --> 00:02:37,944
Así que tenemos que replicar esta parte,

51
00:02:37,944 --> 00:02:41,449
y poner "-webkit-" aquí.

52
00:02:41,449 --> 00:02:49,814
Y luego aquí, replicaremos esto, y ponemos "-webkit-", "-webkit-",

53
00:02:49,814 --> 00:02:51,533
¡Wow, bien!

54
00:02:51,533 --> 00:02:55,320
Ahora se hace grande en todos los navegadores.

55
00:02:55,320 --> 00:02:58,009
Esperemos que para el momento en que veas esta guía paso a paso,

56
00:02:58,009 --> 00:03:00,057
los prefijos ya no sean necesarios,

57
00:03:00,057 --> 00:03:02,214
pero es bueno que sepas que existen,

58
00:03:02,214 --> 00:03:04,675
porque tal vez tengas que usarlos algún día

59
00:03:04,675 --> 00:03:07,770
para alguna otra característica.

60
00:03:07,770 --> 00:03:11,421
Hay una manera más en CSS de hacer animaciones,

61
00:03:11,421 --> 00:03:14,545
y es mediante la propiedad "transition".

62
00:03:14,545 --> 00:03:17,966
Esta propiedad le dice al navegador cómo hacer una transición suavemente,

63
00:03:17,966 --> 00:03:20,346
de una propiedad a la siguiente.

64
00:03:20,346 --> 00:03:23,076
Digamos que queremos que el tamaño de la fuente

65
00:03:23,076 --> 00:03:26,476
del tiempo que queda, se haga más grande,

66
00:03:26,479 --> 00:03:28,290
cuando pasas el ratón por encima.

67
00:03:28,290 --> 00:03:30,229
Podríamos hacer eso en JavaScript,

68
00:03:30,229 --> 00:03:33,293
asignando un detector de eventos, para el evento "mouse over"

69
00:03:33,293 --> 00:03:34,910
y luego usar "requestAnimationFrame".

70
00:03:34,910 --> 00:03:37,330
para incrementar la propiedad de tamaño de la fuente cada vez,

71
00:03:37,330 --> 00:03:41,808
pero también podemos hacer todo eso usando solamente CSS.

72
00:03:41,808 --> 00:03:44,336
Vamos a pensar, ¿cómo podríamos cambiar

73
00:03:44,336 --> 00:03:46,523
el tamaño de la fuente de manera normal,

74
00:03:46,523 --> 00:03:48,744
para que sea más grande, cuando pasas por encima, usando CSS?

75
00:03:48,744 --> 00:03:50,747
Podemos hacerlo con una regla "hover".

76
00:03:50,747 --> 00:03:54,058
Escribimos "#countdown:hover,"

77
00:03:54,058 --> 00:03:59,608
y luego, "font-size: 150px".

78
00:03:59,608 --> 00:04:02,609
Ok, y ahora sólo le tenemos que decir al navegador,

79
00:04:02,609 --> 00:04:06,295
que haga la transición en la propiedad de tamaño de la fuente,

80
00:04:06,295 --> 00:04:08,871
en cuánto tiempo debe hacer la transición y

81
00:04:08,871 --> 00:04:11,135
qué función de tiempo usar.

82
00:04:11,135 --> 00:04:19,245
Así que le decimos: "transition: font-size 1s linear;".

83
00:04:19,245 --> 00:04:21,854
Ahora, deberías pausar la guía paso a paso,

84
00:04:21,854 --> 00:04:25,643
tratar de pasar el ratón sobre el texto y ver qué pasa.

85
00:04:25,643 --> 00:04:28,525
Si estás usando Chrome, Firefox o IE 10+,

86
00:04:28,525 --> 00:04:31,144
deberías ver que se hace grande suavemente.

87
00:04:31,144 --> 00:04:35,560
Y no necesitas ningún prefijo de fabricante para esta técnica.

88
00:04:35,560 --> 00:04:37,564
Hay mucho más que puedes hacer

89
00:04:37,564 --> 00:04:39,364
con animaciones y transiciones en CSS,

90
00:04:39,364 --> 00:04:42,130
y los navegadores son muy buenos para reproducirlas rápidamente.

91
00:04:42,130 --> 00:04:45,430
Así que te animo a que las explores a profundidad.