Ok, a esta altura você deve estar discutindo se usará set interval
ou request animation frame 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 tag style à página,
e algo que se parece com uma regra CSS,
mas é na verdade uma definição de animação
Escreveremos #KeyFrames, e um nome para a animação, getBigger, e colchetes.
Precisamos de dois estados: from e to
para uma animação simples, que vai de um estado para outro
dentro do from descreveremos a propriedade CSS inicial,
se lembra que haviamos definido que seria 50px?
Dentro do to 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 getBigger, 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 -webkit na frente,
então replicamos essa parte
e escrevemos -webkit- aqui, e então aqui
replicaremos isso e adicionaremos -webkit-, e -webkit-
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 event listener ao evento mouse over,
e usar request animation frame 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 hover, digamos #countdown hover
e então font size 150px.
Só precisamos dizer ao navegador que faça a transição da propriedade font size,
informando sua duração, digamos transition font-size 1 second linear
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]