1
00:00:00,903 --> 00:00:05,281
Ok, a esta altura você deve estar 
discutindo se usará <i>set interval</i>

2
00:00:05,322 --> 00:00:07,997
ou <i>request animation frame</i> para
fazer uma animação.

3
00:00:08,532 --> 00:00:12,701
Mas eu estou aqui para colocar 
mais lenha nessa fogueira.

4
00:00:13,728 --> 00:00:20,103
No Chrome, Firefox, e IE 10 em diante, 
é possível fazer animações usando CSS,

5
00:00:20,222 --> 00:00:24,499
sem escrever uma linha de JavaScript.

6
00:00:24,949 --> 00:00:30,023
Vamos comentar nosso código para 
tentar isso na animação "Óh não".

7
00:00:31,036 --> 00:00:36,433
Apenas o envolva em um grande 
comentário de múltiplas linhas.

8
00:00:36,814 --> 00:00:40,384
Começaremos adicionando 
a <i>tag style</i> à página,

9
00:00:40,890 --> 00:00:44,630
e algo que se parece com uma regra CSS,

10
00:00:44,693 --> 00:00:47,793
mas é na verdade uma definição de animação

11
00:00:48,250 --> 00:00:56,444
Escreveremos <i>#KeyFrames</i>, e um nome 
para a animação, <i>getBigger</i>, e colchetes.

12
00:00:57,263 --> 00:01:02,243
Precisamos de dois estados: <i>from</i> e <i>to</i>

13
00:01:02,243 --> 00:01:07,458
para uma animação simples, que vai 
de um estado para outro

14
00:01:07,488 --> 00:01:12,403
dentro do <i>from</i> descreveremos 
a propriedade CSS inicial,

15
00:01:12,453 --> 00:01:16,084
se lembra que haviamos 
definido que seria 50px?

16
00:01:16,477 --> 00:01:21,707
Dentro do <i>to</i> descreveremos 
a propriedade CSS final,

17
00:01:21,747 --> 00:01:25,533
parece que era 300px, está lembrado?

18
00:01:26,490 --> 00:01:29,219
Uma vez que definimos a animação,

19
00:01:29,263 --> 00:01:32,448
precisamos contar ao navegador 
qual elemento fará uso dela.

20
00:01:33,642 --> 00:01:37,879
Então adicionaremos uma regra 
CSS normal para "Óh não"

21
00:01:38,679 --> 00:01:47,080
e especificamos <i>getBigger</i>, que é o 
nome da animação, e sua duração,

22
00:01:47,129 --> 00:01:51,540
que é três segundos, em seu interior.

23
00:01:53,245 --> 00:01:56,661
Dependendo do navegador que 
estiver usando, alguns devem

24
00:01:56,707 --> 00:01:59,125
estar pensando, uau, legal, funciona!

25
00:01:59,157 --> 00:02:03,763
mas em alguns navegadores como Safari
ou Chrome, talvez não funcione.

26
00:02:03,820 --> 00:02:08,185
Isso ocorre por conta do que chamamos
de prefixo de fabricante.

27
00:02:09,947 --> 00:02:15,775
As vezes o navegador decide implementar 
uma funcionalidade nova,

28
00:02:16,253 --> 00:02:21,050
o fabricante põe o prefixo indicando
que essa funcionalidade é experimental,

29
00:02:21,100 --> 00:02:24,610
representa apenas a visão do fabricante
e provavelmente mudará mais tarde.

30
00:02:24,943 --> 00:02:29,533
Para que isso funcione no Chrome, 
caso ainda não esteja funcionando

31
00:02:29,663 --> 00:02:33,763
temos que fazer tudo que ja foi dito,
e colocar <i>-webkit</i> na frente,

32
00:02:34,814 --> 00:02:37,500
então replicamos essa parte

33
00:02:38,232 --> 00:02:43,275
e escrevemos <i>-webkit-</i> aqui, e então aqui

34
00:02:43,836 --> 00:02:48,901
replicaremos isso e adicionaremos
<i>-webkit-</i>, e <i>-webkit-</i>

35
00:02:50,485 --> 00:02:54,870
Legal, agora está aumentando
para todos os navegadores

36
00:02:54,981 --> 00:02:58,326
e quem sabe quando você
assistir essa vídeo aula,

37
00:02:58,406 --> 00:03:00,761
esses prefixos já nem sejam
mais necessários

38
00:03:00,930 --> 00:03:02,676
mas é bom saber que eles existem,

39
00:03:02,696 --> 00:03:06,212
pois você pode precisar usá-los para
outras funcionalidades algum dia.

40
00:03:08,262 --> 00:03:11,260
Há também, mais uma maneira de 
fazer animações com CSS,

41
00:03:11,742 --> 00:03:14,419
usando as propriedades de transição,

42
00:03:14,509 --> 00:03:19,621
que instruem o navegador como fazer a 
transição suave entre as propriedades.

43
00:03:20,767 --> 00:03:27,755
Vejamos como aumentar a fonte do contador
quando o mouse estiver sobre ele

44
00:03:28,340 --> 00:03:33,074
Podemos fazer em javascript, associando um
<i>event listener</i> ao evento <i>mouse over</i>,

45
00:03:33,242 --> 00:03:37,207
e usar <i>request animation frame</i> para 
aumentar a fonte quando necessário

46
00:03:37,354 --> 00:03:41,283
mas, também podemos fazer 
isso inteiramente em CSS.

47
00:03:42,121 --> 00:03:47,799
Vamos pensar em como fazer
isso à maneira CSS

48
00:03:48,419 --> 00:03:54,534
podemos usar uma regra <i>hover</i>, 
digamos <i>#countdown hover</i>

49
00:03:54,534 --> 00:04:00,465
e então <i>font size 150px</i>.

50
00:04:00,870 --> 00:04:07,038
Só precisamos dizer ao navegador que faça
a transição da propriedade <i>font size</i>,

51
00:04:07,072 --> 00:04:17,994
informando sua duração, digamos 
<i>transition font-size 1 second linear</i>

52
00:04:19,450 --> 00:04:25,420
Agora pause a vídeo aula, passe o mouse
sobre o texto e veja o que acontece.

53
00:04:26,000 --> 00:04:31,168
Se você está usando, Chrome, Firefox, ou 
IE 10 em diante, isso deve funcionar

54
00:04:31,261 --> 00:04:35,564
e nem foi necessário usar os prefixos
de fabricante nessa técnica.

55
00:04:35,608 --> 00:04:39,100
Você pode fazer muito mais em
animações e transições com CSS

56
00:04:39,140 --> 00:04:42,661
e os navegadores estão executando elas
cada vez mais graciosa e rapidamente

57
00:04:42,707 --> 00:04:45,442
então, eu aconselho que você
as explore bem mais a fundo.

58
00:04:45,452 --> 00:04:49,962
Revisado por [Fernando dos Reis]