[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.90,0:00:05.28,Default,,0000,0000,0000,,Ok, a esta altura você deve estar \Ndiscutindo se usará {\i1}set interval{\i0}
Dialogue: 0,0:00:05.32,0:00:07.100,Default,,0000,0000,0000,,ou {\i1}request animation frame{\i0} para\Nfazer uma animação.
Dialogue: 0,0:00:08.53,0:00:12.70,Default,,0000,0000,0000,,Mas eu estou aqui para colocar \Nmais lenha nessa fogueira.
Dialogue: 0,0:00:13.73,0:00:20.10,Default,,0000,0000,0000,,No Chrome, Firefox, e IE 10 em diante, \Né possível fazer animações usando CSS,
Dialogue: 0,0:00:20.22,0:00:24.50,Default,,0000,0000,0000,,sem escrever uma linha de JavaScript.
Dialogue: 0,0:00:24.95,0:00:30.02,Default,,0000,0000,0000,,Vamos comentar nosso código para \Ntentar isso na animação "Óh não".
Dialogue: 0,0:00:31.04,0:00:36.43,Default,,0000,0000,0000,,Apenas o envolva em um grande \Ncomentário de múltiplas linhas.
Dialogue: 0,0:00:36.81,0:00:40.38,Default,,0000,0000,0000,,Começaremos adicionando \Na {\i1}tag style{\i0} à página,
Dialogue: 0,0:00:40.89,0:00:44.63,Default,,0000,0000,0000,,e algo que se parece com uma regra CSS,
Dialogue: 0,0:00:44.69,0:00:47.79,Default,,0000,0000,0000,,mas é na verdade uma definição de animação
Dialogue: 0,0:00:48.25,0:00:56.44,Default,,0000,0000,0000,,Escreveremos {\i1}#KeyFrames{\i0}, e um nome \Npara a animação, {\i1}getBigger{\i0}, e colchetes.
Dialogue: 0,0:00:57.26,0:01:02.24,Default,,0000,0000,0000,,Precisamos de dois estados: {\i1}from{\i0} e {\i1}to{\i0}
Dialogue: 0,0:01:02.24,0:01:07.46,Default,,0000,0000,0000,,para uma animação simples, que vai \Nde um estado para outro
Dialogue: 0,0:01:07.49,0:01:12.40,Default,,0000,0000,0000,,dentro do {\i1}from{\i0} descreveremos \Na propriedade CSS inicial,
Dialogue: 0,0:01:12.45,0:01:16.08,Default,,0000,0000,0000,,se lembra que haviamos \Ndefinido que seria 50px?
Dialogue: 0,0:01:16.48,0:01:21.71,Default,,0000,0000,0000,,Dentro do {\i1}to{\i0} descreveremos \Na propriedade CSS final,
Dialogue: 0,0:01:21.75,0:01:25.53,Default,,0000,0000,0000,,parece que era 300px, está lembrado?
Dialogue: 0,0:01:26.49,0:01:29.22,Default,,0000,0000,0000,,Uma vez que definimos a animação,
Dialogue: 0,0:01:29.26,0:01:32.45,Default,,0000,0000,0000,,precisamos contar ao navegador \Nqual elemento fará uso dela.
Dialogue: 0,0:01:33.64,0:01:37.88,Default,,0000,0000,0000,,Então adicionaremos uma regra \NCSS normal para "Óh não"
Dialogue: 0,0:01:38.68,0:01:47.08,Default,,0000,0000,0000,,e especificamos {\i1}getBigger{\i0}, que é o \Nnome da animação, e sua duração,
Dialogue: 0,0:01:47.13,0:01:51.54,Default,,0000,0000,0000,,que é três segundos, em seu interior.
Dialogue: 0,0:01:53.24,0:01:56.66,Default,,0000,0000,0000,,Dependendo do navegador que \Nestiver usando, alguns devem
Dialogue: 0,0:01:56.71,0:01:59.12,Default,,0000,0000,0000,,estar pensando, uau, legal, funciona!
Dialogue: 0,0:01:59.16,0:02:03.76,Default,,0000,0000,0000,,mas em alguns navegadores como Safari\Nou Chrome, talvez não funcione.
Dialogue: 0,0:02:03.82,0:02:08.18,Default,,0000,0000,0000,,Isso ocorre por conta do que chamamos\Nde prefixo de fabricante.
Dialogue: 0,0:02:09.95,0:02:15.78,Default,,0000,0000,0000,,As vezes o navegador decide implementar \Numa funcionalidade nova,
Dialogue: 0,0:02:16.25,0:02:21.05,Default,,0000,0000,0000,,o fabricante põe o prefixo indicando\Nque essa funcionalidade é experimental,
Dialogue: 0,0:02:21.10,0:02:24.61,Default,,0000,0000,0000,,representa apenas a visão do fabricante\Ne provavelmente mudará mais tarde.
Dialogue: 0,0:02:24.94,0:02:29.53,Default,,0000,0000,0000,,Para que isso funcione no Chrome, \Ncaso ainda não esteja funcionando
Dialogue: 0,0:02:29.66,0:02:33.76,Default,,0000,0000,0000,,temos que fazer tudo que ja foi dito,\Ne colocar {\i1}-webkit{\i0} na frente,
Dialogue: 0,0:02:34.81,0:02:37.50,Default,,0000,0000,0000,,então replicamos essa parte
Dialogue: 0,0:02:38.23,0:02:43.28,Default,,0000,0000,0000,,e escrevemos {\i1}-webkit-{\i0} aqui, e então aqui
Dialogue: 0,0:02:43.84,0:02:48.90,Default,,0000,0000,0000,,replicaremos isso e adicionaremos\N{\i1}-webkit-{\i0}, e {\i1}-webkit-{\i0}
Dialogue: 0,0:02:50.48,0:02:54.87,Default,,0000,0000,0000,,Legal, agora está aumentando\Npara todos os navegadores
Dialogue: 0,0:02:54.98,0:02:58.33,Default,,0000,0000,0000,,e quem sabe quando você\Nassistir essa vídeo aula,
Dialogue: 0,0:02:58.41,0:03:00.76,Default,,0000,0000,0000,,esses prefixos já nem sejam\Nmais necessários
Dialogue: 0,0:03:00.93,0:03:02.68,Default,,0000,0000,0000,,mas é bom saber que eles existem,
Dialogue: 0,0:03:02.70,0:03:06.21,Default,,0000,0000,0000,,pois você pode precisar usá-los para\Noutras funcionalidades algum dia.
Dialogue: 0,0:03:08.26,0:03:11.26,Default,,0000,0000,0000,,Há também, mais uma maneira de \Nfazer animações com CSS,
Dialogue: 0,0:03:11.74,0:03:14.42,Default,,0000,0000,0000,,usando as propriedades de transição,
Dialogue: 0,0:03:14.51,0:03:19.62,Default,,0000,0000,0000,,que instruem o navegador como fazer a \Ntransição suave entre as propriedades.
Dialogue: 0,0:03:20.77,0:03:27.76,Default,,0000,0000,0000,,Vejamos como aumentar a fonte do contador\Nquando o mouse estiver sobre ele
Dialogue: 0,0:03:28.34,0:03:33.07,Default,,0000,0000,0000,,Podemos fazer em javascript, associando um\N{\i1}event listener{\i0} ao evento {\i1}mouse over{\i0},
Dialogue: 0,0:03:33.24,0:03:37.21,Default,,0000,0000,0000,,e usar {\i1}request animation frame{\i0} para \Naumentar a fonte quando necessário
Dialogue: 0,0:03:37.35,0:03:41.28,Default,,0000,0000,0000,,mas, também podemos fazer \Nisso inteiramente em CSS.
Dialogue: 0,0:03:42.12,0:03:47.80,Default,,0000,0000,0000,,Vamos pensar em como fazer\Nisso à maneira CSS
Dialogue: 0,0:03:48.42,0:03:54.53,Default,,0000,0000,0000,,podemos usar uma regra {\i1}hover{\i0}, \Ndigamos {\i1}#countdown hover{\i0}
Dialogue: 0,0:03:54.53,0:04:00.46,Default,,0000,0000,0000,,e então {\i1}font size 150px{\i0}.
Dialogue: 0,0:04:00.87,0:04:07.04,Default,,0000,0000,0000,,Só precisamos dizer ao navegador que faça\Na transição da propriedade {\i1}font size{\i0},
Dialogue: 0,0:04:07.07,0:04:17.99,Default,,0000,0000,0000,,informando sua duração, digamos \N{\i1}transition font-size 1 second linear{\i0}
Dialogue: 0,0:04:19.45,0:04:25.42,Default,,0000,0000,0000,,Agora pause a vídeo aula, passe o mouse\Nsobre o texto e veja o que acontece.
Dialogue: 0,0:04:26.00,0:04:31.17,Default,,0000,0000,0000,,Se você está usando, Chrome, Firefox, ou \NIE 10 em diante, isso deve funcionar
Dialogue: 0,0:04:31.26,0:04:35.56,Default,,0000,0000,0000,,e nem foi necessário usar os prefixos\Nde fabricante nessa técnica.
Dialogue: 0,0:04:35.61,0:04:39.10,Default,,0000,0000,0000,,Você pode fazer muito mais em\Nanimações e transições com CSS
Dialogue: 0,0:04:39.14,0:04:42.66,Default,,0000,0000,0000,,e os navegadores estão executando elas\Ncada vez mais graciosa e rapidamente
Dialogue: 0,0:04:42.71,0:04:45.44,Default,,0000,0000,0000,,então, eu aconselho que você\Nas explore bem mais a fundo.
Dialogue: 0,0:04:45.45,0:04:49.96,Default,,0000,0000,0000,,Revisado por [Fernando dos Reis]