⭐ Minicurso Animações CSS

e o prometido o tão anunciado o tão aguardado minicurso de animações css [Música] fala moçada aqui é o tássio e se você é novo no canal e gosta de animações css considere assinar o canal e ativar o sininho para acompanhar nossos conteúdos inéditos a partir de agora e hoje finalmente o tão aguardado minicurso de animações ss tivemos um vídeo sobre animações aí no passado e colocamos uma meta de likes a ser batida essa meta foi atingida e como prometido aqui está um minicurso sobre animações ss e se você foi uma das pessoas que deu lá

e cá lá no outro vídeo e já acompanha que nossos conteúdos no canal já dá aquele gostei aí agora já compartilha de cara antes mesmo de começar esse conteúdo tá incrível esse recurso tá muito é com você mesmo vai comprovar então dá o seu gostei comenta com partilha e vamos ajudar a espalhar em cima e curso que vai ajudar muita gente então sem mais delongas vamos ao minicurso de animações s&s animações desempenha um papel crítico na melhoria de um ex pois ajudam a fornecer feedbacks visuais muito melhores tornando as interações muito mais úteis e eficientes

até memoráveis animações precisam ser usados com sabedoria ou você pode criar uma página que causa distração ao invés de prover interação o objetivo das animações é servir como auxiliador e aprimorador e não como um obstáculo ao se acessar o site ou é objectivamente animações interface pode me trazer a um projeto informação hierarquia foco feedback status expressão da marca e muito e dentre as opções de tecnologia disponíveis para tudo isso animações css com certeza devem constar no seu rol de possibilidades como apresentamos em nosso artigo no blog sobre o assunto link na descrição do vídeo é

possível categorizar animação de interface sem três tipos funcional o material e encantador animação pode ajudar a alcançar metas de o ex e fazer aí vai ficar mais consistente e real tudo isso enquanto impulsionar a adoção de um serviço ou produto por inteiro animação funcional otimiza experiência percebida fazendo aparecer melhor e mais abrangente guia a atenção das pessoas após planejados e fornece feedback visual e faz a preparação para etapas futuras animação material constrói animação através de um modelo consistente de yu hai definir as relações espaciais entre telas e elementos sua altura relativa e elevação peso boa

tarde etc o tipo encantador depois dos dois anteriores serem cumpridos adiciona humanidade e diversão traz a sensação de algo único e memorável entre tem os visitantes e os ajuda se relacionar com site ou apps a boa notícia é que as tecnologias web atuais já permitem fazer esses 3 tipos de animação esse curso sua piscando é amigável e convidativo como vamos lá digite alguma coisa e principalmente é funcional se ele parar de piscar isso significa que o sistema está parado ou com processamento integral esse simples cursor piscando mostra que animação é essencial para sugerir ou sugestionar

interações bem como para ajudar a compreender estados do site ou sistema em ciência cognitiva existe um fenômeno chamado cegueira de mudança que é quando uma mudança súbita no estímulo visual impede as pessoas de perceberem no as informações animação funcional também ajuda a prevenir isso contribuindo para preencher eventuais lacunas de compreensão animação material não é sobre as coisas da google é sobre como fazer uma interface espacialmente lógica animando a com base nas leis da física com simulações de gravidade e inércia a velocidade e etc isso ajuda a memorizar padrões de ios mais facilmente já que tudo

isso nos é familiar e familiar por ser baseado no mundo real esse mesmo que você deveria passar mais tempo ou que em frente ao monitor outro problema de mocha uai é mau gosto gosto é subjetivo claro mas no geral é relacionada à estética a estética humana é baseada no mundo que nos rodeia se você usar uma boa mecânica dinâmica e ótica como bases é muito mais fácil criar uma animação de bongos animação do tipo encantador e enfatiza que todos nós apreciamos o valor de produtos mais humanos encantadores e dtm em atos irracionais obviamente animações precisam

ser funcionais e materiais acima de tudo mas como seres humanos não somos apenas nacionais também somos emotivos queremos nos divertir para aproveitar o sites e apps que usamos animação pode tomar esse tipo de experiência realmente agradável e memorável quando bem feitas animações encantadoras trazem vida e personalidade o projeto mais do que isso trazem alma bom então vamos começar definir um elemento box aqui só para abrigar essa imagem e aqui colocando um exemplo qualquer pode ser essa bandeirinha do brasil aqui bem legal e aí não totalmente relacionado o que o que vamos mostrar mas só para

ficar mais fácil de entender vamos centralizar aqui para coisa ficar mais bem visualizada também acho que vai ser legal a gente colocar o limite visível aqui para esse box para ver melhor para ser possível ver menor aqui o que que a gente vai alternar e para você ver como as coisas realmente funcionam então vamos utilizar aqui a imagem tag e mg com o transforme vamos ver todas as possibilidades aqui a primeira delas translate ex esse x pode ser colocado tanto minúscula quanto maiúsculo e aqui colocamos um valor qual que é em várias unidades possíveis por

exemplo 100 pixels perceba que ele se diz a 100 pixels para a direita como dissemos tem uma grande diferença com o mar de um por exemplo que margem até o ter o flu do documento vamos colocar até um valor maior aqui para você ver perceba que a própria dimensão do box foi alterada ao passo aqui translate usado com transforma não faz isso temos também translate uai que aí no eixo y e somente translate que o primeiro valor é xix e separado por vírgula o segundo é y sendo possível também usar diversas unidades de css e

valores positivos ou negativos com skill também estamos a possibilidade de escolheu x para som e eixo então aqui usando o tamanho de proporções colocamos dois quer dizer duas vezes aquele tamanho só no eixo x ou o valor quebrado por exemplo 1.25 temos então isso que eu ai que ele aí faz no eixo y e caso seja o que ele faz em ambos e aí aumenta ou diminui caso seja o valor menor que um aquele elemento alvo potente que como sugere o próprio nome rotacione o elemento e aqui a gente pode usar graus que o derm

né então 45 graus lembrando que pode ser negativo também ou a unidade turma que a volta né então por exemplo meia-volta 0.5 turno é o equivalente a 180 graus é possível usar qualquer valor qualquer valor quebrado aí né e a coisa vai dar certo então você pode usar um outro conforme você acha melhor skill é a diretiva que dá uma inclinada no elemento então se usamos aqui por exemplo é somente no eixo x podemos fazer 2010 e ele em 20 graus dessa inclinada no x podemos fazer também 20° no y e usando somente o skill

ele faz em ambos os eixos podemos colocar o valor como por exemplo -20° perceba que é possível usar não somente o poder de cada uma dessas possibilidades através das diretivas mas também é possível combiná-las e aí chegar a resultados muito mais satisfatórios e alcançar resultados muito mais poderosos por exemplo colocando um translate x de 100 pixels juntamente com skill de 1.5 então e se desloca e aumento também aí é só em um card ano o que se quer aqui por exemplo um o touch - 15° e aí ou só vai montando conforme a necessidade e

com essas diretivas com o transforme é possível fazer coisas mil é possível chegar a resultados dos mais diversos e é o bastante usado aí quando o assunto é animações ss só uma coisa bastante importante aqui é para você ter cuidado ao sobre escrever aqui ou transforma se você tiver usando diretivas múltipla é isso porque você queira sobrescrever somente o translate ex se você colocar só essa diretiva ele vai eliminar o isqueiro e o leite porque esse valor é múltiplo mais a propriedade ou uma só então para fazer esse tipo de sobre escrito você altere o

valor que quer e repita os valores das outras diretivas vamos colocar um elemento box aqui como referência como vai ser só ele vamos aumentar a útil aqui do css e aí na estilização desse box vamos colocar aqui uma cor de fundo que vai ser o azul obviamente algumas dimensões aqui para ele né senão ele não vai aparecer na tela e só que ele não ficar grudado aqui na viewport vamos só dar um marido aqui no próprio bari para se é possível visualizar melhor aqui para ficar bem evidente que a gente vai mostrar aqui agora vamos

colocar num cover que essa cor vai ficar bem diferente vamos colocar um laranja aqui e também podemos mudar o próprio shape vamos fazer virar um círculo para isso a cinquenta por cento então pode ver que tá bem diferente você estado normal ele é um quadrado azul e no rover um circular anti agora começa a entrar os verdadeiros poderes da transição a propriedade transition property permite escolher qual o propriedade css vai passar pela transição no caso vamos trabalhar no momento com beldecor transition-duration é a duração o que só vai acontecer dois segundos um exemplo aqui só

para você ver ao fazer o rover a forma muda abruptamente porque border-radius não foi incluído ali no momento entretanto como já está marcado uma transição para a cor de fundo ela sim no período de dois segundos contra sejam duration faz essa transição suave de uma cor para outra no caso é possível trabalhar com múltiplas propriedades então o dono aqui uma vírgula e colocar na próxima no caso o nosso poder widow como transition-duration é um valor só bom então ao fazer rover ambos propriedades serão transicional dados caso seja necessário estabelecer durações diferentes basta dar uma vírgula

e aí especificar a próxima duração da próxima propriedade para ficar mais claro vamos colocar meio segundo aqui aí dá para ver bem melhor transition-delay é para comande com o nome da uma espiadinha era dá um delay entre o momento em que acontece ação no caso rover e quando a transição realmente vai começar no caso um segundo só para não esquecer ou deixar comentário aqui mas não vamos usar agora transition-timing-function é realmente uma coisa incrível existem algumas funções pré-determinadas no próprio browser por exemplo um é uma função que dá uma suavizada no início da coisa is

out é ao contrário né e no fim desse período de transição nas período de duração temos também es un out que em ambos né e aí o verdadeiro poder de time function é definir uma função personalizada para isso usando a diretiva que o bico peso e é possível passar uma série de pontos que são pontos na curva da animação o melhor a função de tempo não se preocupa como eu usar adivinhei aqui entre aspas quais são esses valores depois eu mostro para você como faz para encontrar função adequada o que você quer mas só para

você ver aqui ficou dessa maneira o início e o fim são bem mais acelerados e no meio ele dá uma lentidão causando é ser feito bem interessante de no início acelerado meio mais lento e fim acelerado novamente veja como é uma transmissão totalmente diferente que usando uma das funções pré-determinadas do navegador ou mesmo não usando o time fanfiction algum é e aí é preparado ambiente rapidinho aqui para explicar que frames e as propriedades animation basicamente a uma imagem de background bari e esse aviãozinho o código disso é irrelevante o que importa agora é focar nas

animações adjetiva arroba que franz serve para especificar animação propriamente dito o nosso vídeo anterior sobre animações ss já fizemos uma explicação mas simplificadamente essa é a diretiva que faz a abstração da time line e como sugere o próprio nome que friends especificando o que vai acontecer ao elemento em momentos-chave da animação no conserto de tailine ao termo interpolação que na prática faz com que seja preciso somente definir os pontos chaves da animação que frames e o próprio navegador faz a ligação por assim dizer entre os estados entre cada um desses pontos antes de continuar o

aviso muito importante não dá tempo de explicar em detalhes agora mas pelo bem da performance sempre que possível e somente as propriedades transforma e o peste para suas animações então para explicar mas na prática que rapidinho a sintaxe é arroba que frente e aí você escolhe um nome para animação aqui no caso vamos colocar fly mas pode ser como você prefira algo que dê sentido e significado aquela animação em específico como dissemos trata-se de uma abstração de uma linha do tempo de uma thai muay então a momentos dessa time online em que você pode por

diferente então por exemplo zero por cento você pode por alguma coisa ou seja no início 100% ou seja no fim e óbvio nos valores intermediários também 35% 32/77 por cento enfim toda time lá e está disponível para você especificar os seus pontos e aí em cada um deles você coloca as propriedades que quer animar para mostrar rapidinho aqui no início a zero por cento vamos colocar um transforme com transe um a zero já no fim esse translate x vai ser o tamanho da viu por né 100vw ou melhor tem que ser o tamanho total né

100vw menos o tamanho do aviãozinho pé 200 pixels aí sim ele vai fazer o caminho do início ao fim eu vou colocar uma propriedade aqui agora mas não se preocupe que daqui a pouco a gente vai entrar em mais detalhes é só para animação funcionar aqui efetivamente e aí ao recarregar ele vai do início ao fim da tela para casos como esse é disponível inclusive algumas palavras-chave então o início seria from quer dizer partir de hiato oo o fim para onde vai a animação ao salvar executando novamente o resultado é o mesmo e em situações

assim em que o início não importa tanto é meio que o início da full pode ser até omitir o from ficando só o tio indicando para onde vai animação depois que ela tem início vamos voltar aqui então só para ilustrar é mais um keyframe aqui na metade vamos colocar um outro transforme vamos colocar dessa vez um translate a duzentos por cento x e menos 50 pixels no y e aí só para ficar mais claro nas outras também vamos completar colocando o valor de y opa lembrando que agora é só translate né porque estamos usando os

dois valores ao salvar e recarregar a página animação vai um ponto na sua metade e depois conclui no sem por cento e aí uma vez definida o que animação vai fazer é preciso um controlar como essa animação vai se dar através de uma diversidade de parâmetros e agora sim vamos ver em mais detalhes todas as propriedades animation para o nosso exemplo a definição de que frames não se altera o que vai acontecer na animação já está definido agora vamos ao como a primeira propriedade portanto é animation-name que especifica o nome dado nadh a arroba aqui

friends que descreve animação ao ser aplicada o elemento basicamente trata-se do exato mesmo nome e se atribui ali no arroba e fértil toda animação claro precisa de uma duração então existe animation-duration que define o tempo que uma animação leva para ser executado ela aceita valores em segundo com a letra s m l segundo com ms então no caso 500 ml segundo equivale a ponto 5 segundos bem tranquilo no caso vamos colocar aqui dois segundos como exemplo nesse ponto ao salvar já é possível ver a execução acontecendo definimos qual será a animação sua ai e a

sua duração dois segundos só para você ver aqui ó vamos colocar 200 milissegundos ela vai bem rapidinho animation-timing-function esta propriedade define como uma animação progride ao longo da duração de cada ciclo em outras palavras a função de tempo é aplicada na animação é o terceiro pilar de animações que comentamos no último vídeo easy o próprio css já oferece algumas opções predefinidas então no próprio auto complete editora e mostras as opções é possível selecionar alguma delas por exemplo skin vamos só trocar duração aqui para ser possível visualizar melhor e aí o isis e dá uma suavização

no início da animação isis altos dá uma suavização no fim es un alto é no início e no fim quer dizer dá para já conseguir alguma diferenciação de animações aí nessas funções predefinidas mas também é possível criar personalizadas usando a função que obter uma boa função personalizada pode ser o diferencial para uma excelente animação então vamos colocar uma aqui qual que é só para você ver depois você vai saber como se chega nesses pontinhos específicos mas olha só que diferente o movimento fica completamente de dentro dos que vemos até agora aqui também é permitido o

uso da função steps que limita o número de friends ou passos da animação só para você ter uma ideia se colocarmos steps 3 animação se dará em três passos ou freios aqui ele tem o segundo parâmetro que ajuda a configurar onde exatamente esse darão esses três frentes e aí conforme a configuração que se coloque animação sai de um jeito ou de outro temos um artigo com mais informações sobre os apps em nosso blog o link vai estar na descrição do vídeo por enquanto vamos usar a palavrinha linear classe animação sem curva de itens alguma vai

ser aquele animação linear como sugere para a próxima animation-delay que especifica a quantidade de tempo de espera ou seja o delei desde o aplicação da animação o elemento até animação começar efetivamente tal como animation-duration aceita segundos ou milissegundos então por exemplo se colocarmos meio segundo a 500 milissegundos tanto faz ao recarregar a página vai demorar 500 milissegundos para animação acontecer para ficar mais claro vamos trocar a duração para dois segundos e o de lei para um segundo então quando for carregado só depois de um segundo a animação vai acontecer vamos por um segundo e-mail aqui

para não ficar tão namoradinha e aí deu para ter uma boa ideia animation-iteration-count esta propriedade define um número de vezes que uma animação deve ser reproduzida antes do pará por exemplo vamos colocar três aqui então ao recarga a página perceba que animação vai acontecer três vezes antes de parar então foi a primeira a segunda ea terça o interessante é que é possível colocar valores quebrados também então vamos colocar um dois e meio aqui 2.5 e aí ela vai a primeira a segunda na metade ela paga também a palavra chave infinito para animação ser repetida um

definidamente só comentar que o delay e olha muito e mudar aqui a duração para ficar mais dinâmico e aí uma vez executada ela vai ficar aí e infinitamente em animation-direction como o próprio nome indica a especificação da direção da animação ela aceita os valores reverso então ao recarregar animação mais de trás para frente o autor leite quer dizer ela vai de um lado para o outro né vai no início até o fim do fim até o início no caso vou só que os comentar aqui para colocar infinitamente que aí vai dá para ver perfeitamente que

isso significa aí sim então ela vai do início ao fim do fim plenilúncio e fica assim alternadamente e infinitamente e temos também autor neide reverse que mistura as duas coisas aí ela começa no reverso e fica alternando a partir daí só comentar aqui então pra gente continuar então vamos para animation-fill-mode essa é uma propriedade que gera dúvidas e tem muitas peculiaridades principalmente por ter em outras propriedades da animação que são ser usados simplificadamente definir quais valores são aplicados antes e ou depois da animação por exemplo você pode definir o último estado da animação para permanecer

na tela na prática dá para entender melhor vamos ver aqui o valor fortes significa que o último estado da animação deve ser mantido então ao se executar animação perceba que o aviãozinho não voltou por seu estado inicial ele ficou lá no fim olha aí de novo aí deu para ver direitinho estamos abec words que fica do estado inicial da animação então é carregando aqui ele ficou no início aqui pareceu que nada mudou né mas vamos fazer uma alteração aqui na animação ela vai ter a posição inicial no eixo x a 200 pixels então recarregando percebo

que ela começa a partir do 200 pixels mas quando finaliza ela vai para o início também temos o bolso que é ambos né acontece as duas e para ficar mais claro aqui vamos retornar com esse de lei e colocar um e-mail duração da animação e aí com esse bolo dá para ver o seguinte ela iniciou naqueles 200 pixels e quando finalizou ela não retornou logo pro início ela ficou em uma posição parecido com força só para você ter uma ideia clara do que a coisa colocando beckford ela vai iniciar com esse de lei aqui em

200 pixels e quando finalizar vai para o início da tela só fazendo um clique aqui para gente ver agora o animation-play-state que define a animação está sendo executada ou se está pausada seus valores são running quer dizer está acontecendo animação ou pausa quer dizer está parada você pode estar achando aqui só uma coisa meio inútil mas dependendo aí da sua animação pode ser muito útil sim por exemplo a gente pode pôr no rover o estado de pausa e aí tá rolando animação ali se fizer o rover ela vai parar e quando saio mouse ela continua

do exato ponto bom e como não poderia deixar de ser existe uma maneira abreviada de usar todas essas propriedades de animação uma short-run que facilita muito a escrita no dia a dia a ordem das propriedades usadas nessa short é exatamente é que apresentamos até agora a boa notícia é que você pode uma mentira as propriedades que não for usar e aí a escrita nessa short a gente fica bem curtinho vamos comentar todas essas então e usar só ne mexa o primeiro valor então é de anime chão nem seria fly o segundo a duração a terceira

a time fanfiction e aí ó recarregar exatamente o que havíamos tido antes percebo aqui já podemos pular animation-delay e isso é colocarmos infinito ele já vai entender que se trata de ter eixão country dando o play aí na animação ele vai ficar infinitamente conforme o que consta no fly vou até tirar esse from aqui para dar para ver melhor e aí a gente pode usar qualquer valor válido né por exemplo 3 e aí vai dizer que eu tá três ver olá tudo isso que a gente viu agora pouco e aí está com o animation-direction também

sendo possível e recomendado que você use a propriedade animation que esse short hand para todas as propriedades disso ss relacionadas à animação e aí tá gostando do que tá vendo até agora poxa tá demais hein então dá aquele like ajuda a compartilhar e vamos fazer este minicurso chegar o máximo de pessoas possível então compartilha aí e vamos continuar vendo conteúdo do minicurso de animações ss [Música] é o primeiro exemplo bem legal é um background com degradê animado é um efeito relativamente simples mas que algumas pessoas têm dúvidas de como se faz é bem tranquilo para

começar aqui no html vamos só colocar um h1 aqui só para ter um texto né de referência não ficar aqui da grande puro e aqui no css como estamos focando no efeito da animação incita vamos deixar aí o código para dar algum visual para esse h u e o bad hound em si vou recolher aqui esse javascript quem vai servir para nada nesse momento e redimensionando aqui o painel vai dar para ver melhor o css então esse velho onde é um gradiente linear com algumas cores bem diferentes entre si flores bem bonitas para dar realmente

esse visual bem diferenciado como vimos agora a pouco no vídeo para se fazer esse tipo de animação usaremos a diretiva aqui friends e temos que dar um nome pode ser por exemplo gradians o grande segredo o maçom de background com degradê e usar a propriedade background position então vamos fazer três que frames aqui para essa animação ficar conforme o efeito que a gente quer alcançar claro que é possível fazer diversos tipos de animação mas nesse exemplo vamos usar dessa maneira em seu início zero por cento background-position vai ficar no eixo x 0 e no y

cinquenta por cento na metade da animação pego aonde position vai ficar a sem por cento e cinquenta por cento no final zero e cinquenta por cento novamente o próximo passo claro é atribuída a propriedade animation avare então vamos usar o nome que demos grand-am essa vai ser uma animação mais suave então 10 segundos um isis já para definir e vai ficar infinitamente acontecendo como aumentar aqui um pouquinho para ver melhor e tá aí animação muito legal bem simples de ser feito e dá um efeito bem e para colocar no rio ou no mar chamada fica

bem bonito só para você ter uma ideia melhor do que realmente está acontecendo vamos trocar que o tamanho do background na br-116 e o eixo x você vai ver olha que interessante simplesmente animação fica indo de um lado para o outro pelo seu position por isso é tão importante o big house size para ficar rico invisível né ser feito ficar mascarado e deve ser feito bem interessante aí de movimentação do balde com degradê e isso você tava prestando atenção aí viu que é uma certa repetição o nosso código então seria possível também usar aquelas palavrinhas

from exu ele vai de uma posição para outra mas aí o que que acontece quando ele chega ao fim ele já retorna abruptamente ao início vamos colocar aqui até um tempo menor dois segundos que você vai ver bem melhor olha só quando ele chega ao fim ele retorna de uma vez daquele só a vamo lá pô no caso em que podemos usar alternate para ficar aquela animaçao tal como estava antes com o código menor ou código mais fácil de visualizar e o mesmo efeito aplicado e aí podemos voltar para 10 segundos e fica exatamente como

essa é a animação de degradê no graus por exemplo prático bem legal é uma certinho animada é bem tranquilo de ser feito você já pode começar com esse tipo de animação mais simples e pode ser usada aí para fazer um a indicação de escrow.com download alguma coisa assim então aqui no html colocamos um é cerveja qualquer pegado aí na internet e para não ficar muito grande aqui vamos limitar a sua largura vamos colocar 200 pixels e tá aí essa certinho como poderia ser qualquer outra também fica aí é o critério e as necessidades do seu

projeto não tá diretamente relacionada aqui com animação mas vamos dar uma centralizada para ficar visualmente melhor desempenho e como recolher aqui esse editor de javascript que nós vamos usar e na nossa diretiva que frames vamos colocar um nome aqui por exemplo esmalte quer dizer tá pulando né e esse caso precisaremos somente de um tio por caso no nosso translate uai colocamos 30 pixels então no nome da animação esbal sem vai durar um segundo o waze já é o pré-definido e e vamos colocar infinitamente acontecendo aqui a gente fosse um bar e para fazer uma brincadeira

mais claro no cenário do mundo real você pode colocar diretamente né mesmo vai ficar bem legal também colocamos o alternate para ele ficar mais suavemente indicando o movimento aqui se ficou alguma dúvida sobre os exames fica bem claro aqui usando o easy normal use um pode ver que parece que ele vai quicando no chão né e no es ao é como se tivesse um teto né ele bate mais na parte de cima e ver e o easy em alto o produto dois ele fica suave no início e não essas são as funções pré-definidas para se

fazer os exames né mas claro como você já sabe a esse ponto uma função personalizada com que o dbz pode fazer toda a diferença entre uma boa e uma má nenhuma ação com css esse outro exemplo prático que eu gosto bastante é aquela animação de táxi e viu né primeiro vem unbox e depois da passagem desse box aparece um texto o efeito que eu particularmente gosto bastante se você não tá entendendo direito o que a gente usou para mostrar os três tipos de animação aí no início do vídeo aquele efeitinho que vem uma caixinha quando

ela sai do texto aparece é bem legal e é relativamente fácil de se fazer primeiro vamos colocar um título aqui que vai ser o que será revelado ensina ele pode ser um h1 mesmo e está envolto em um rapper esse rapper bem importante pra técnica vão recolher aqui o pênis jogos clips que não vai ser necessário é diretamente relacionada o efeito mas vou colocar uma estilização geral aqui para as coisas ficarem mais claras ficar coisas centralizado aqui mais fácil de ver né e esse nosso apple e chamamos de tecto e viu vai conter um seu

do astro lembrando que essa sintaxe aqui com e comercial é porque estamos usando sés aqui no outro é se você ainda não sabe muito bem o que é isso ou como usar essa notação tá parecendo um card aí agora com nosso vídeo com a introdução acesso mas é bem tranquilo é a mesma coisa que usar um teste e viu e usar os dois pontos after não alinhado esse alinhamento esse comercial é possível pelos és vamos colocar aqui então uma corrente pego alto e se contente vazio contos playback são necessários para o elemento aparecer né vamos

colocar que ele tem um posicionamento absoluto zerando seus posicionamentos né com toque white botão e leste como tá ocupando toda a tela não é esse o efeito desejado bom então vamos limitar o nosso elemento em si antes disso só aquela ordenada básica em ordem alfabética aqui e aí para ele ficar contido digamos assim o elemento terá um over florida com posicionamento relativo que como estamos trabalhando com o absoluto o pai relativo e ouvir florido vai fazer ficar limitado ao próprio alimento ou pelo menos dessa aparência né só para você ver é só esse box aqui

por cima do texto a gente escondendo e revelando pode ver que o texto tá aí por trás então na nossa objetivo aqui foi o nome que vamos lá pode ser até tive o mesmo e os nossos famosos from e tio então no início o from ele vai ter um transformer que vai ser translate apps quer dizer o eixo x na horizontal né e aí vamos colocar que ele vai ficar totalmente deslocada à esquerda - 100% algumas pessoas gostam de fazer o mais um por cento aqui para garantir né - 101 por cento vamos usar dessa

forma aqui não oi e o nosso tu quer dizer para onde vai a coisa não é o fim da animação vai ser esse translate ex 101 por cento quer dizer ele fica totalmente deslocada à esquerda e depois atravessa e totalmente deslocado a direita animation vamos colocar em nome da yamasa podemos lá na diretiva aqui fãs para você ver melhor vamos colocar um tempo mais alto aqui mas claro que o tempo real da animação é legal mais baixo nessa um pouco chato esse easy normal e o for que você já viu que serve para manter o

estado final da animação então a dando uma olhadinha e já deu certo olha que legal efeito vamos diminuir um pouquinho aqui o dois segundos viu que legal vou executar novamente mas queremos que o texto só apareça depois que o box tiver com toda sua extensão em tela né então uma outra animação que será necessária porque inicialmente esse texto não pode estar visível então vamos ganhar o que podemos chamar de feio e ela vai para quer dizer o chulé o fim da animação o elemento está com opacidade um obviamente para cumprir isso o elemento tem que

começar com a facilidade zero e aí colocando o nosso animation vamos usar um nome que demos fez e aí vem o pulo do gato que dar um milissegundo de duração quer dizer imediatamente e aí o macete acordaram de lei quer dizer um segundo de delay para somente aparecer depois de um certo tempo quer dizer o tempo daquele box aparecer e depois ser recolhido esse é o grande segredo da técnica no caso você pode ajustar o tempo total da animação do bloco em si com o tempo do fed conforme a sua animação o tempo que você

quer dar coisa assim e também na outra maneira encontrar um exame adequado que garanta aí que supra as necessidades do projeto da animação e esse easy pode permitir ficar me eu vou fazer esse cálculo zinho né por exemplo eu vou usar um aqui que eu gosto bastante é bem interessante e ele torna a fácil de fazer esse cálculo que o tempo do delay fica exatamente a metade do tempo para aparecer o box olha que legal ou fazendo essa mudança se colocarmos um segundo ele para aparecer o boxe o dilei vai ser meio ser bom vão

rodar novamente para você ver de novo muito legal só animação eu gosto bastante e dá para você conseguir efeitos bem interessantes aí usando essa animação de tecto e viu nos seus projetos e eu gostaria também de indicar outros dois vídeos que já publicamos aqui no canal do de pw o primeiro vídeo é de um loading com css puro tá aparecendo aí no card agora você vai aprender como fazer um login somente com css e animações bem legal o segundo foi uma minissérie que fizemos de três vídeos de uma ativo social card quer dizer usando uma

animação e para fazer um card social também tá aparecendo aí no card agora para você acessar então como exemplo final vamos fazer animação de entrada de uma espécie de landing page que temos ficticiamente aqui aqui tem um título ouço completa animações iss eo call to action quero fazer aqui como o foco é mais mostrar a parte de animações não tomamos tanto cuidado assim com a parte responsiva claro que você teria que ter esse cuidado aí em um projeto do mundo real mas só para você ver como fica aqui primeiro na resolução 1366 por 768 que

a resolução desktop mais comum no momento da gravação do vídeo e mesmo colocando um pouco abaixo aí se tamanho de viu forte ele até que não faz feio colocando as estrelinhas aí para se mover e aí deu para você perceber uma coisa essas montanhas são uma imagem as estrelinhas são outras com degradê a gente já vai ver com mais detalhes daqui a pouco no caso estamos usando b e o body place para projetos aqui do canal se você é novo e ainda não conhece tá parecendo um card aí agora para você ver um vídeo específico

sobre o brb então na nossa parte de com teu olho estamos aqui no até que nem com o título curso completo animações css e aquele quatro edson eu quero fazer a estrutura que do balé plate usa smacks para a organização dos estilos se você não conhece a basicamente uma arquitetura bem específica para organizar os arquivos e css mais claro que o que vamos mostrar que funciona sem isso mas só para você entender um pouquinho mais aqui temos um arquivo principal ou sky o ponto sss aqui o sono cs e esse arquivo um porta todos os

demais então aqui nesse outro elements temos no próprio body uma pseudo after e aí carrega as estrelas e o degradê desse vim e para um grana de um rosa para cinza só para você ver a sombra mais impura tá é um degradê feito com css dá até para alterar aqui se a gente quiser ir às estrelas são png que fica por cima caso seja necessário alterar a isso tem que ficar trocando a imagem toda a nossa tag man que tem essa classe aqui elemento usando aqui nem space essa né temos um four e carrega a

imagem das montanhas então tomando cuidado aqui para ficar uma composição bem legal tomando cuidado com nenhum deles né então aqui um aqui menos um e o quanto action chamamos de ser botão tem um estilo aqui vem comum bem tranquilo com a exceção de um pseudo before e aí vai vir um segredinho para animação que vai acontecer no botão no caso temos uma borda de 9 pixels se você vira essa função zinha ren espalhada por aí faz parte também do bfb e ela simplesmente converte pixels para unidades ren então quando tá escrito renove é equivalente a

nove pixel é mas o macetinho aqui é que é uma borda de 9 pixels da mesma cor que o fundo do botão só para você ter uma ideia aqui nos débitos vamos colocar o fundo transparente e aí deu para você ver se o seu nome for com essa bolinha e posicionado de uma forma que ele fique invisível por enquanto o primeiro toque de animação entanto podemos dar aqui é movimentar essas estrelas aqui no fundo vai ficar bem interessante uma animação suave só para dar uma vida mais uma personalidade eu só além de emprego então dentro

dos macs aqui do bfb vamos dentro da pastinha stent criar o arquivo está em mim quer dizer ele tá se movendo ali na horizontal na fazendo efeito pena aquele estilo principal temos que importar o que acabamos de criar lá quando formos mexer dar tudo certinho basicamente será uma animação então colocaremos nossa diretiva que franz o nome pode ser spene e ele vai começar uma transição que não translate apps e aí e colocar o ponto de partida das animação alguns pixels deslocadas à esquerda no 50 acho que está de bom tamanho e aí vem motivo pelo

qual colocamos a largura 105 por cento se não colocássemos assim como ele tá um pouquinho deslocado para a esquerda e ficar um buraco ali na tela e não ia ficar nada legal então aumentamos ela um pouquinho e fazer nesse efeito dependendo vai ficar bem interessante vamos colocar então o nosso a propriedade animation o nome que demos para animação como a ideia é uma coisa bem suave vamos colocar 20 segundos ela vai ter suavidade no início e no fim e claro queremos que seja uma coisa infinita e que fique alternadamente na tela então aberto um lado

para o outro e não terminar jamais olha aí já tá rolando animação só para ser possível ver melhor né vamos colocar um tempo bem curtinho só para você ver o que tá acontecendo e as estrelas ficam de um lado para o outro olha que legal principalmente isso a gente colocar o tempo correto né para ficar aqui é bem suave então nossos 20 segundos aqui e aí você tem aquela coisa elegante nessa página aqui elegante rapaz olha aí maravilha aquele toque suave né a pessoa vai ver e já vai esse maravilhar com essa animação tão elegante

de tão bom gosto outra coisa que ficaria bem legal também é um efeitinho quando deu o cu ver nesse call-to-action então vamos fazer o seguinte aqui nessa pastinha stent vamos colocar um outro arquivo iso e plim quer dizer aquele efeito ripple né como se fosse com você joga pedrinha na água daquele whipple naquela ondulação importando aqui no arquivo principal e aí usando a nossa já conhecida diretiva que foi uns vamos dar um nome piso vírgula pode ser por exemplo e isso a vamos colocar o tio quer dizer o fim da animação no fim ele vai

com opacidade de 0 e 1 transformers tio quer dizer aquele efeito de ondulação né ele vai aumentar vamos colocar o skill para aumentar valor os links no x e y para dar um efeito mais legal e aí no arquivinho tô botão vamos colocar no rover e de repente até no focus também pode ser interessante a atribuição que essa animação mas lembra do seguinte essa animação era muito for é naquele elemento com 19 pixel de borda ele vai fazer parte da animação então no caso usando césar aqui o que cessem oferecer vamos no nosso e comercial

no uber no focus usar before que ali que tá o elemento que a gente quer então a nossa propriedade animation o nome que demos é snow bow primeiro parâmetro é atribuição do nome o segundo é o tempo dessa animação vamos usar uma função zinho a cruz tom para dar uma personalidade animação e vamos colocar que vai acontecer infinitamente enquanto o mouse tiver ali sobre o botão o toque a mais que é possível é no é que tive assim que a pessoa pressionar ali dá uma deslocar dinheiro botão né dá um feedback para pessoa que ela

realmente e no caso não vamos querer animação alguma se tiver no meio da animação ali na cancelada simplesmente então o before vai ficar com animation na então salvando ao fazer horror aí está a nossa animação daquela bordinha fazendo efeito ripple o até maximizar aqui para ser possível ver melhor quando o roubo é feito o efeitinho daquelas botas vai ficar opacidade zero aumentando seu tamanho olha aqui efeito tão legal e no caso com essas duas animações a página já ficou bem melhor já tá muito mais atrativa muito mais interessante né mas ainda é possível melhorar ainda

possível ir além vamos realmente fazer uma animação de introdução aquela página então o podemos aqui nos states criar um chá quer dizer foi mostrado né vamos importá-lo aqui no style ponto sss e aí na verdade talvez esse prefixo isso não seja tão legal porque vai acontecer uma vez só que talvez seja um resto né e já foi mostrado na regiçao então vamos trocar aqui rapidinho vai ser um resto tchau e abrindo arquivo na nossa diretiva aqui friends ela vai ter exatamente esse nome é resto tchau e ela vai começar de um jeito e terminar de

outro então nosso from ou para cidade será zero e vamos fazer uma brincadeira aqui ou transforme com translate with no eixo y vamos fazer uma animaçãozinha pode ser um 50 pixels aqui de deslocamento tá bem legal sendo que no fim ou facilidade estará restaurada ou gostar de um e esse translate uai não vai mais acontecer transforme nome o diferencial que dessa parte é de podemos criar uma classe que vai ter a definição das animação e atribuir a vários elementos então a classe rest ao terá o animation com o nome do que frames quisermos ali a

duração de dois segundos uma função personalizada bem legal para ser aquela animação de personalidade né aqui no bf v já temos alguns e pré-determinadas e o nosso famoso fortes pra manter posição da animação que foi feita então tá aí a nossa declaração dele mexam e aí como temos essa classe vamos atribuir aos elementos que queremos no caso será o título e o botão portanto aqui no nosso html vamos colocar no h1 rest ao e também no próprio batom ao salvar tá aí animação feita bem legal o recarregar aqui para você ver de novo e aí

quer saber o que vai dar aquela cereja do bolo aquele xande qualidade vai ser um delay no botão e como a gente pode fazer isso colocando style inline é uma técnica bem legal aí para você ter um controle fino de como está acontecendo um animation-delay mas se alguns milissegundos aí só para dar uma diferenciação entre um e outro quando a gente salvar primeiro vai título e depois botão ficando uma animação muito mais sofisticado de novo aqui para você ver olha que coisa linda e aí não sei se você percebeu de um f é muito agradável

no botão porque ele primeiro aparece e depois eu passei lá de zero entra em ação para isso não acontecer vamos já colocaram a cidade 0 no botão direto e aí não vai ter essa pequena interferência tá agora sim ao recarregar primeiro título depois bota maximizando aqui ó vamos recarregar de novo olha que coisa linda olha que é feito como deu uma vida mais trouxe uma personalidade para essa além de impedir né muito interessante coisas que é possível fazer a ícone mansões css que vão dar outra cara aos seus projetos do ep 1 e aqui para

fechar o nosso minicurso sobre animações css vamos indicar algumas ferramentas bem legais a primeira e esses ponto net é o grande segredo de onde sai aqueles números vinhos ali pra função tio bezier para colocar funções de em especializar este site apresenta uma série clássica de tipos de animação diferente em que é possível consultar e copiar ele é bem legal porque também tem em português ao fazer o rover aqui nas diferentes funções de tempo é possível ver ali o boletim fazendo o caminho e mostrando um preview de como será a animação usando aquela função de tempo

ao clicar detalhes aparecem inclusive o gráfico um pouco maior zinho e o código css para você copiar e usar além de informações a mais também é possível fazer alguns testes aqui de posição por exemplo e aí você vê a diferença dessa função de tempo em comparação uma função e enfim é um site muito legal bastante conhecido aí no mundo da animação css e você pode consultar a vontade também relacionada as curvas de irem personalizadas é o que o big bezerra.com motor que é o mesmo nome da função zinha né pois é caso algumas daquelas funções

pré-definidas do isis cotonete não tenha te satisfeito ou não tem atendido aos requisitos do projeto nesse site é possível criar uma curva personalizada para fazer a sua função de tempo do jeito que for necessário então aqui ele permite pegar fazer o grab que eles rendam-se e em tempo real vai atualizando a sua curva de tempo e atualizando os valores da própria função que obter também um preview da diferença entre a comparação de duas funções escolhidas você pode copiar clicando no botão zinho aqui já está na sua área de transferência ou de alguma outra forma mas

aquela mesma função selecionada o em a possível selecionar aqui para fazer a comparação importar e exportar esse certo e o mais incrível salvar na biblioteca aqui do próprio site uma vez feita uma curva personalizada você pode salvá-lo nessa labor e aí fazer a sua própria biblioteca de funções personalizadas e usando esse import export ter isso sempre a mão perceba aqui para cada uma delas você pode clicar com o botão direito do mouse copiar o link e aí ter o link direto para o preview daquela função de animação o animista é para você que já está

mais habituado aí aos conceitos e práticas de animação com css ele é uma ferramenta completa que vai te ajudar bastante no dia a dia fornecendo muitos tipos de animação diferente todas customizáveis então por exemplo temos aqui um skill up ao clicar nesse botãozinho de recarregar ele vai mostrando a animação que temos aqui nas opções apple o dicionário que será animado para esse preview vamos deixar a caixinha aqui mesmo e aí todas aquelas propriedades de animação que vimos agora a pouco no curso então temos a duração a função de tempo delay etc viu como é importante

conhecê-las antes de trabalhar com ferramentas do contrário você não entenderia nada por aqui e aí cada tipo de animação essa que skill up tem as suas variações então vamos passar por outras aqui que eu dá um por exemplo o legal é que você pode favoritar uma animação e aí ela vai estar salvo para você montar na sua biblioteca de repente até por projeto e claro a opção você copiaram código com ou sem autoprefixer com os em minificação e aí temos diversos tipos aqui né temos de flick aí usa o card zinho para fazer com os

seus diversos tipos de variação também temos inclusive diversos tipos de filipe né temos diversos tipos de slide cortei shadow enfim mu e inclusive é até agrupado por categorias então essa que estávamos elas básicas temos animações de entrada animações de saída animações contexto o que ele chama aqui de atenção né chama bastante atenção mesmo inclusive animações big house então esse é o animista um site muito muito útil com certeza pode te ajudar bastante a chegar aí naquela animação específica para dar aquela vida que ela personalidade no projeto que você tá trabalhando então é isso pessoal esse

foi o minicurso de animações css promessa é dívida prometemos aí com a meta de likes no último vídeo e está entregue minicurso de animações css tenho certeza que você gostou foi o conteúdo preparado com muito cuidado com muito carinho e a partir de agora você já conhece mais sobre si animation e algumas das possibilidades e do que é possível fazer com animações ss então muito obrigado e a gente se vê aquela hora valeu o