0:00:00.903,0:00:05.281
Ok, a esta altura você deve estar [br]discutindo se usará <i>set interval</i>

0:00:05.322,0:00:07.997
ou <i>request animation frame</i> para[br]fazer uma animação.

0:00:08.532,0:00:12.701
Mas eu estou aqui para colocar [br]mais lenha nessa fogueira.

0:00:13.728,0:00:20.103
No Chrome, Firefox, e IE 10 em diante, [br]é possível fazer animações usando CSS,

0:00:20.222,0:00:24.499
sem escrever uma linha de JavaScript.

0:00:24.949,0:00:30.023
Vamos comentar nosso código para [br]tentar isso na animação "Óh não".

0:00:31.036,0:00:36.433
Apenas o envolva em um grande [br]comentário de múltiplas linhas.

0:00:36.814,0:00:40.384
Começaremos adicionando [br]a <i>tag style</i> à página,

0:00:40.890,0:00:44.630
e algo que se parece com uma regra CSS,

0:00:44.693,0:00:47.793
mas é na verdade uma definição de animação

0:00:48.250,0:00:56.444
Escreveremos <i>#KeyFrames</i>, e um nome [br]para a animação, <i>getBigger</i>, e colchetes.

0:00:57.263,0:01:02.243
Precisamos de dois estados: <i>from</i> e <i>to</i>

0:01:02.243,0:01:07.458
para uma animação simples, que vai [br]de um estado para outro

0:01:07.488,0:01:12.403
dentro do <i>from</i> descreveremos [br]a propriedade CSS inicial,

0:01:12.453,0:01:16.084
se lembra que haviamos [br]definido que seria 50px?

0:01:16.477,0:01:21.707
Dentro do <i>to</i> descreveremos [br]a propriedade CSS final,

0:01:21.747,0:01:25.533
parece que era 300px, está lembrado?

0:01:26.490,0:01:29.219
Uma vez que definimos a animação,

0:01:29.263,0:01:32.448
precisamos contar ao navegador [br]qual elemento fará uso dela.

0:01:33.642,0:01:37.879
Então adicionaremos uma regra [br]CSS normal para "Óh não"

0:01:38.679,0:01:47.080
e especificamos <i>getBigger</i>, que é o [br]nome da animação, e sua duração,

0:01:47.129,0:01:51.540
que é três segundos, em seu interior.

0:01:53.245,0:01:56.661
Dependendo do navegador que [br]estiver usando, alguns devem

0:01:56.707,0:01:59.125
estar pensando, uau, legal, funciona!

0:01:59.157,0:02:03.763
mas em alguns navegadores como Safari[br]ou Chrome, talvez não funcione.

0:02:03.820,0:02:08.185
Isso ocorre por conta do que chamamos[br]de prefixo de fabricante.

0:02:09.947,0:02:15.775
As vezes o navegador decide implementar [br]uma funcionalidade nova,

0:02:16.253,0:02:21.050
o fabricante põe o prefixo indicando[br]que essa funcionalidade é experimental,

0:02:21.100,0:02:24.610
representa apenas a visão do fabricante[br]e provavelmente mudará mais tarde.

0:02:24.943,0:02:29.533
Para que isso funcione no Chrome, [br]caso ainda não esteja funcionando

0:02:29.663,0:02:33.763
temos que fazer tudo que ja foi dito,[br]e colocar <i>-webkit</i> na frente,

0:02:34.814,0:02:37.500
então replicamos essa parte

0:02:38.232,0:02:43.275
e escrevemos <i>-webkit-</i> aqui, e então aqui

0:02:43.836,0:02:48.901
replicaremos isso e adicionaremos[br]<i>-webkit-</i>, e <i>-webkit-</i>

0:02:50.485,0:02:54.870
Legal, agora está aumentando[br]para todos os navegadores

0:02:54.981,0:02:58.326
e quem sabe quando você[br]assistir essa vídeo aula,

0:02:58.406,0:03:00.761
esses prefixos já nem sejam[br]mais necessários

0:03:00.930,0:03:02.676
mas é bom saber que eles existem,

0:03:02.696,0:03:06.212
pois você pode precisar usá-los para[br]outras funcionalidades algum dia.

0:03:08.262,0:03:11.260
Há também, mais uma maneira de [br]fazer animações com CSS,

0:03:11.742,0:03:14.419
usando as propriedades de transição,

0:03:14.509,0:03:19.621
que instruem o navegador como fazer a [br]transição suave entre as propriedades.

0:03:20.767,0:03:27.755
Vejamos como aumentar a fonte do contador[br]quando o mouse estiver sobre ele

0:03:28.340,0:03:33.074
Podemos fazer em javascript, associando um[br]<i>event listener</i> ao evento <i>mouse over</i>,

0:03:33.242,0:03:37.207
e usar <i>request animation frame</i> para [br]aumentar a fonte quando necessário

0:03:37.354,0:03:41.283
mas, também podemos fazer [br]isso inteiramente em CSS.

0:03:42.121,0:03:47.799
Vamos pensar em como fazer[br]isso à maneira CSS

0:03:48.419,0:03:54.534
podemos usar uma regra <i>hover</i>, [br]digamos <i>#countdown hover</i>

0:03:54.534,0:04:00.465
e então <i>font size 150px</i>.

0:04:00.870,0:04:07.038
Só precisamos dizer ao navegador que faça[br]a transição da propriedade <i>font size</i>,

0:04:07.072,0:04:17.994
informando sua duração, digamos [br]<i>transition font-size 1 second linear</i>

0:04:19.450,0:04:25.420
Agora pause a vídeo aula, passe o mouse[br]sobre o texto e veja o que acontece.

0:04:26.000,0:04:31.168
Se você está usando, Chrome, Firefox, ou [br]IE 10 em diante, isso deve funcionar

0:04:31.261,0:04:35.564
e nem foi necessário usar os prefixos[br]de fabricante nessa técnica.

0:04:35.608,0:04:39.100
Você pode fazer muito mais em[br]animações e transições com CSS

0:04:39.140,0:04:42.661
e os navegadores estão executando elas[br]cada vez mais graciosa e rapidamente

0:04:42.707,0:04:45.442
então, eu aconselho que você[br]as explore bem mais a fundo.

0:04:45.452,0:04:49.962
Revisado por [Fernando dos Reis]