Ok, a esta altura você deve estar 
discutindo se usará <i>set interval</i>

ou <i>request animation frame</i> para
fazer uma animação.

Mas eu estou aqui para colocar 
mais lenha nessa fogueira.

No Chrome, Firefox, e IE 10 em diante, 
é possível fazer animações usando CSS,

sem escrever uma linha de JavaScript.

Vamos comentar nosso código para 
tentar isso na animação "Óh não".

Apenas o envolva em um grande 
comentário de múltiplas linhas.

Começaremos adicionando 
a <i>tag style</i> à página,

e algo que se parece com uma regra CSS,

mas é na verdade uma definição de animação

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

Precisamos de dois estados: <i>from</i> e <i>to</i>

para uma animação simples, que vai 
de um estado para outro

dentro do <i>from</i> descreveremos 
a propriedade CSS inicial,

se lembra que haviamos 
definido que seria 50px?

Dentro do <i>to</i> descreveremos 
a propriedade CSS final,

parece que era 300px, está lembrado?

Uma vez que definimos a animação,

precisamos contar ao navegador 
qual elemento fará uso dela.

Então adicionaremos uma regra 
CSS normal para "Óh não"

e especificamos <i>getBigger</i>, que é o 
nome da animação, e sua duração,

que é três segundos, em seu interior.

Dependendo do navegador que 
estiver usando, alguns devem

estar pensando, uau, legal, funciona!

mas em alguns navegadores como Safari
ou Chrome, talvez não funcione.

Isso ocorre por conta do que chamamos
de prefixo de fabricante.

As vezes o navegador decide implementar 
uma funcionalidade nova,

o fabricante põe o prefixo indicando
que essa funcionalidade é experimental,

representa apenas a visão do fabricante
e provavelmente mudará mais tarde.

Para que isso funcione no Chrome, 
caso ainda não esteja funcionando

temos que fazer tudo que ja foi dito,
e colocar <i>-webkit</i> na frente,

então replicamos essa parte

e escrevemos <i>-webkit-</i> aqui, e então aqui

replicaremos isso e adicionaremos
<i>-webkit-</i>, e <i>-webkit-</i>

Legal, agora está aumentando
para todos os navegadores

e quem sabe quando você
assistir essa vídeo aula,

esses prefixos já nem sejam
mais necessários

mas é bom saber que eles existem,

pois você pode precisar usá-los para
outras funcionalidades algum dia.

Há também, mais uma maneira de 
fazer animações com CSS,

usando as propriedades de transição,

que instruem o navegador como fazer a 
transição suave entre as propriedades.

Vejamos como aumentar a fonte do contador
quando o mouse estiver sobre ele

Podemos fazer em javascript, associando um
<i>event listener</i> ao evento <i>mouse over</i>,

e usar <i>request animation frame</i> para 
aumentar a fonte quando necessário

mas, também podemos fazer 
isso inteiramente em CSS.

Vamos pensar em como fazer
isso à maneira CSS

podemos usar uma regra <i>hover</i>, 
digamos <i>#countdown hover</i>

e então <i>font size 150px</i>.

Só precisamos dizer ao navegador que faça
a transição da propriedade <i>font size</i>,

informando sua duração, digamos 
<i>transition font-size 1 second linear</i>

Agora pause a vídeo aula, passe o mouse
sobre o texto e veja o que acontece.

Se você está usando, Chrome, Firefox, ou 
IE 10 em diante, isso deve funcionar

e nem foi necessário usar os prefixos
de fabricante nessa técnica.

Você pode fazer muito mais em
animações e transições com CSS

e os navegadores estão executando elas
cada vez mais graciosa e rapidamente

então, eu aconselho que você
as explore bem mais a fundo.

Revisado por [Fernando dos Reis]