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