WEBVTT

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

00:00:05.322 --> 00:00:07.997
ou <i>request animation frame</i> para
fazer uma animação.

00:00:08.532 --> 00:00:12.701
Mas eu estou aqui para colocar 
mais lenha nessa fogueira.

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

00:00:20.222 --> 00:00:24.499
sem escrever uma linha de JavaScript.

00:00:24.949 --> 00:00:30.023
Vamos comentar nosso código para 
tentar isso na animação "Óh não".

00:00:31.036 --> 00:00:36.433
Apenas o envolva em um grande 
comentário de múltiplas linhas.

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

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

00:00:44.693 --> 00:00:47.793
mas é na verdade uma definição de animação

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

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

00:01:02.243 --> 00:01:07.458
para uma animação simples, que vai 
de um estado para outro

00:01:07.488 --> 00:01:12.403
dentro do <i>from</i> descreveremos 
a propriedade CSS inicial,

00:01:12.453 --> 00:01:16.084
se lembra que haviamos 
definido que seria 50px?

00:01:16.477 --> 00:01:21.707
Dentro do <i>to</i> descreveremos 
a propriedade CSS final,

00:01:21.747 --> 00:01:25.533
parece que era 300px, está lembrado?

00:01:26.490 --> 00:01:29.219
Uma vez que definimos a animação,

00:01:29.263 --> 00:01:32.448
precisamos contar ao navegador 
qual elemento fará uso dela.

00:01:33.642 --> 00:01:37.879
Então adicionaremos uma regra 
CSS normal para "Óh não"

00:01:38.679 --> 00:01:47.080
e especificamos <i>getBigger</i>, que é o 
nome da animação, e sua duração,

00:01:47.129 --> 00:01:51.540
que é três segundos, em seu interior.

00:01:53.245 --> 00:01:56.661
Dependendo do navegador que 
estiver usando, alguns devem

00:01:56.707 --> 00:01:59.125
estar pensando, uau, legal, funciona!

00:01:59.157 --> 00:02:03.763
mas em alguns navegadores como Safari
ou Chrome, talvez não funcione.

00:02:03.820 --> 00:02:08.185
Isso ocorre por conta do que chamamos
de prefixo de fabricante.

00:02:09.947 --> 00:02:15.775
As vezes o navegador decide implementar 
uma funcionalidade nova,

00:02:16.253 --> 00:02:21.050
o fabricante põe o prefixo indicando
que essa funcionalidade é experimental,

00:02:21.100 --> 00:02:24.610
representa apenas a visão do fabricante
e provavelmente mudará mais tarde.

00:02:24.943 --> 00:02:29.533
Para que isso funcione no Chrome, 
caso ainda não esteja funcionando

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

00:02:34.814 --> 00:02:37.500
então replicamos essa parte

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

00:02:43.836 --> 00:02:48.901
replicaremos isso e adicionaremos
<i>-webkit-</i>, e <i>-webkit-</i>

00:02:50.485 --> 00:02:54.870
Legal, agora está aumentando
para todos os navegadores

00:02:54.981 --> 00:02:58.326
e quem sabe quando você
assistir essa vídeo aula,

00:02:58.406 --> 00:03:00.761
esses prefixos já nem sejam
mais necessários

00:03:00.930 --> 00:03:02.676
mas é bom saber que eles existem,

00:03:02.696 --> 00:03:06.212
pois você pode precisar usá-los para
outras funcionalidades algum dia.

00:03:08.262 --> 00:03:11.260
Há também, mais uma maneira de 
fazer animações com CSS,

00:03:11.742 --> 00:03:14.419
usando as propriedades de transição,

00:03:14.509 --> 00:03:19.621
que instruem o navegador como fazer a 
transição suave entre as propriedades.

00:03:20.767 --> 00:03:27.755
Vejamos como aumentar a fonte do contador
quando o mouse estiver sobre ele

00:03:28.340 --> 00:03:33.074
Podemos fazer em javascript, associando um
<i>event listener</i> ao evento <i>mouse over</i>,

00:03:33.242 --> 00:03:37.207
e usar <i>request animation frame</i> para 
aumentar a fonte quando necessário

00:03:37.354 --> 00:03:41.283
mas, também podemos fazer 
isso inteiramente em CSS.

00:03:42.121 --> 00:03:47.799
Vamos pensar em como fazer
isso à maneira CSS

00:03:48.419 --> 00:03:54.534
podemos usar uma regra <i>hover</i>, 
digamos <i>#countdown hover</i>

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

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>,

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

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.

00:04:26.000 --> 00:04:31.168
Se você está usando, Chrome, Firefox, ou 
IE 10 em diante, isso deve funcionar

00:04:31.261 --> 00:04:35.564
e nem foi necessário usar os prefixos
de fabricante nessa técnica.

00:04:35.608 --> 00:04:39.100
Você pode fazer muito mais em
animações e transições com CSS

00:04:39.140 --> 00:04:42.661
e os navegadores estão executando elas
cada vez mais graciosa e rapidamente

00:04:42.707 --> 00:04:45.442
então, eu aconselho que você
as explore bem mais a fundo.

00:04:45.452 --> 00:04:49.962
Revisado por [Fernando dos Reis]