Fundamentos de animação do CSS: domine as transições e os quadros-chave

1. Introdução: Nesta aula, vou ensinar os fundamentos de transições CSS e animações de quadros-chave. Em seguida, você tomará essas habilidades e construirá seu próprio site de página única, que conterá animações CSS que não só adicionam um elemento dinâmico à sua página, mas também melhoram a experiência do usuário. Ei, eu sou David e sou um desenvolvedor web front-end de Norwich, na Inglaterra. Tenho mais de seis anos de experiência na construção de vários aplicativos digitais e sites para uma ampla gama de clientes internacionais. Eu realmente gosto de ajudar os outros a melhorar suas habilidades na Web e dar-lhes a oportunidade de aprender algo mais hoje do que nunca aprenderam antes. Esta classe é para qualquer desenvolvedor que tem algum conhecimento básico de HTML e CSS, mas quer levar seus sites para o próximo nível. Agora, nesta classe, eu vou usar VS Code como meu IDE de escolha, mas você pode usar qualquer um que você esteja familiarizado com. Você também estará hospedando seu site no GitHub Pages. Agora não se preocupe se você nunca usou o GitHub Pages antes, tudo bem, eu vou ajudá-lo através do processo como um todo, completamente gratuito. Com essas habilidades que você vai ganhar com este curso, você será capaz de oferecer muito mais como um desenvolvedor Web, quer você seja ou não um freelancer ou você trabalhe para uma empresa, seus sites e aplicativos se destacarão completamente do multidão. Além de sites, animações CSS podem ser usadas em uma variedade de produtos digitais, criando aplicativos, infográficos, visualização de dados e anúncios digitais. No final desta aula, você será mestre em animações CSS e ficará mais do que confortável trabalhando com transições e quadros-chave. Sem mais delongas, vamos começar. 2. Projeto do curso: O projeto que você construirá é um site de página única, que contém um cabeçalho com um menu de navegação, um rodapé, uma seção para imagens e uma seção com botões. Quero que crie um site baseado em quem quer que seja o seu artista musical favorito ou banda. Mesmo que você esteja focando nas animações, será divertido para você incluir um pouco de conteúdo sobre por que eles são seu artista favorito. Talvez incluir algum texto sobre suas músicas ou álbuns favoritos. Mas não perca muito tempo se preocupando com o conteúdo, pois as animações serão, naturalmente, o foco principal do projeto. Este projeto é uma maneira perfeita para você aplicar suas novas habilidades de animação CSS encontradas em um site do mundo real com componentes que poderiam se beneficiar de algum estilo de animação. Para um projeto bem-sucedido, basta tentar incluir os conceitos de animação que são abordados nesta classe. Claro, você receberá pontos de bônus por experimentar com o que é ensinado, então sinta-se livre para ser criativo. Os alunos devem usar seu editor de código favorito para construir seu projeto de classe. Vou usar código VS, mas qualquer outro editor de código funcionará bem. Você estará implantando seu projeto final em páginas do GitHub. Portanto, uma conta do GitHub é necessária. Mas não se preocupe, vou mostrar como é fácil configurar isso e empurrar seu trabalho para uma página web ao vivo para todos verem. 3. Por que usar animações?: Agora, por que usar animações na web? Bem, as animações podem ajudar a melhorar a experiência do usuário e podem fornecer alguns comentários sobre as ações do usuário. As animações podem ajudar o usuário a se orientar em torno da interface. As animações também são muito boas em chamar a atenção para uma parte específica de uma página, possam dar dicas visuais a um usuário de que alguma ação é necessária. As animações podem indicar que há um elemento que é clicável ou talvez haja mais para ver. É claro que as animações podem adicionar movimento a um site estático e sem vida, dando-lhe algum design esteticamente agradável, e eles são realmente bons em estabelecer um movimento com o usuário. Eles também podem ser usados como uma ferramenta de branding, dando ao usuário uma experiência memorável e divertida. Agora, eu quero que você leve essas coisas em consideração ao criar animações para o seu projeto, e certifique-se de que suas animações servem algum propósito para que haja o equilíbrio certo entre estética e funcionalidade. 4. Transições de CSS: Ao passar o mouse sobre este botão, você pode ver que a opacidade muda. No entanto, a animação é instantânea. Vamos adicionar uma propriedade de transição. Transição, propriedade, e é a opacidade que gostaríamos de fazer a transição. Agora, isto por si só não será suficiente. Precisamos indicar a duração da transição. Esta é a duração da transição. Vou fazer isto 0,2 segundos. Lá podemos ver a animação é muito mais suave. Também podemos alterar a função de temporização de transição. Agora, haverá uma lição dedicada à função de temporização e aos diferentes tipos de atenuação que você pode escolher. O que isso faz, afeta o estilo da transição em si, então a velocidade da qual ele faz a transição do início ao fim. Também podemos acrescentar um atraso à nossa transição. Vamos fazer um segundo. Quando eu passar o mouse sobre o botão, somente após um segundo a transição começará. Agora, este é um longo caminho para escrever nossas transições. Podemos escrever isso na abreviação exatamente da mesma maneira. Transição, e então você pode escolher opacidade, podemos colocar em nossa duração, podemos colocar em nossa função de temporização, e também podemos adicionar nosso atraso. Agora, se removermos isso, essa transição deve funcionar exatamente da mesma maneira. Ele faz. Agora, uma coisa a lembrar, quando você está usando a abreviação de transição, você deve incluir a duração antes do atraso. Mas que tal se quisermos escolher mais de uma propriedade de transição? Bem, digamos que queremos mudar a cor do texto para, digamos, azul ao pairar. Podemos simplesmente escrever cor 0,5 segundos, digamos é, e não vamos colocar um atraso. Para separar as múltiplas propriedades, basta usar uma vírgula assim. Lá vamos nós, várias propriedades. Agora é útil conhecer certas propriedades que você não pode fazer a transição. Vou apenas remover a cor azul do texto e da nossa transição. O que você não pode fazer, se você queria ocultar o botão ao passar o mouse, você não pode fazer exibição, nenhum. Está mostrando exibição aqui. Isso simplesmente não funcionará. Desaparece, mas não há transição entre elas. Isso é porque temos display none e display block. Ou está ligado ou está desligado, ou está lá ou não está. Não há meio termo. É por isso que se você quiser fazer o botão desaparecer suavemente, você pode usar a opacidade, exatamente assim. Que tal se você quiser mover a posição do botão? Agora, em vez de usar esquerda, superior, direita, inferior, por exemplo, assim, eu recomendo fortemente, e este é um truque pessoal, usar transformar, traduzir. Agora eu vou mover isso para a direita por 10 pixels para que possamos usar TranslaTeX. Vamos fazer 10 pixels em nossa transição. Vamos garantir que o transformador seja selecionado. Eu só vou remover o atraso aqui. Podemos ver a transição instantaneamente. Lá vamos nós, agradável e suave. Agora, a razão pela qual eu preferiria usar transformar, traduzir ao mover no item, é que você terá melhor desempenho do que usar a esquerda, inferior, superior, direita, etc. Que tal se você quiser mudar o tamanho do botão? Agora, em vez de selecionar largura e altura, novamente, por causa do melhor desempenho, vou usar transformação, escala. Agora, inicialmente, eu vou fazer este 0,8 do seu tamanho original. Lá você pode ver que é um pouco menor. Em seguida, ao passar o mouse, vamos fazer a escala de volta para um, assim. Agora, outra dica pessoal, ao transformar a escala, se você quiser torná-la maior ao pairar, especialmente quando se trata de imagens, tente não ir acima de uma. Isso é para garantir a clareza e a qualidade da imagem nunca será pixelada. Não é tão ruim quando se usa um botão HTML aqui. Mas se isto fosse uma imagem e dizemos para definir a escala para ser dois, isso seria pixelizado agora. É por isso que eu comecei em 0,8 ou figura abaixo de um, e então escalar até um. Estas são apenas algumas coisas a considerar quando você está começando seu projeto de classe. 5. Funções de cronograma: Aqui temos um botão onde eu defini uma largura máxima de 250 pixels e, em seguida, ao passar o mouse, vou aumentar a largura para 300 pixels. Agora nossa transição está, naturalmente, afetando a largura máxima. Eu fiz isso, eu tenho um segundo que é muito lento, no entanto, é útil para este exemplo. Em seguida, a função de temporização é definida para facilitar, e facilidade é as funções de temporização que vamos falar nesta lição. Facilidade nos dará uma boa animação, onde acelera no meio e depois diminui no final. Quais são os outros valores? Bem, vamos olhar para mais alguns exemplos, e vamos tentar facilitar. Agora, a facilidade começará lentamente e depois acelera no final. Vamos tentar facilitar, o que nos dará o oposto. Começaremos rapidamente, e desaceleraremos no final. Vamos dar uma olhada em linear. Agora, linear nos dará a mesma velocidade ao longo da animação. Temos uma transição consistente. Agora, algo um pouco diferente. Vamos dar uma olhada nos passos. Dentro de parênteses, precisamos dar um número, então quantos passos queremos e como isso vai parecer? Você vê que há três passos para chegar a 300 pixels e voltar novamente. Se mudarmos isso para seis, teremos seis passos uniformemente espaçados. Lá vamos nós. Não estamos limitados a essas funções de flexibilização, porque podemos criar nossas próprias, e para fazer isso, podemos usar os valores bézier cúbicos. Dentro dos parênteses, podemos dar alguns de nossos próprios valores. Eu vou jogar alguns números aleatórios aqui, 0.45, vamos colocar isso aqui, 0.9, e ver o que isso nos dá. Nada muito especial. Vamos brincar com mais alguns valores e ver o que isso nos dá, e voltou ao fim. Esta é a nossa função de facilitação de transição personalizada. Os valores bézier cúbicos são compostos de quatro valores individuais, x1, y1, x2 e y2. Agora, esses números podem ser qualquer coisa além de x1 e x2, que deve ser um número entre zero e um. Agora esses valores são baseados em uma curva que dá o estilo de animação. Agora olhando para a flexibilização linear, sabemos que a velocidade é consistente em toda parte, representada por esta linha reta no gráfico. A relação de saída e a relação de tempo são consistentes em 0, 0, 1 e 1. Mas o que é sobre função de temporização diferente como facilidade? Bem, nós sabemos que a facilidade acelera no meio como mostrado por esta inclinação acentuada na curva, e então alivia no final, onde podemos ver a curva se tornando mais horizontal à medida que termina. Agora, se você quiser experimentar seus próprios valores bézier cúbicos, veja uma dica útil se você estiver no Google Chrome. Eu só vou trazer as ferramentas de desenvolvimento aqui, e realçar o botão. Agora em transição aqui, se abrirmos isso, podemos ver nossa função de temporização de transição e temos nossos valores personalizados aqui. Agora, se passarmos o mouse sobre este ícone aqui, você pode ver que diz aberto editor de bezier cúbico. Se clicarmos nisso, podemos ver uma curva útil aqui que podemos mudar movendo essas alças e nossos valores começam a mudar. Isso afetará nosso botão aqui. Há também algumas predefinições no lado aqui. Nós clicamos nisso, rápido, linear dentro. Vamos clicar em um pouco mais de facilidade para fora que podemos saber. Linear e devagar. Para fora e para trás, vamos tentar isto. Este é um pequeno playground agradável para você experimentar com suas funções de temporização de transição, muito útil. 6. Keyframes de CSS: Agora, as transições são ótimas quando você deseja animar entre dois estados diferentes. Mas e se sua animação precisa ter várias etapas? Bem, é aqui que os quadros-chave CSS entram. Como escrevemos quadros-chave? Abaixo de nossos estilos, podemos escrevê-los na mesma folha de estilos, e você pode, naturalmente, separar seus quadros-chave em seu próprio arquivo CSS de animação, se quiser. Então é @keyframes, e então a próxima palavra é o nome da sua animação, e isso pode ser qualquer coisa que você gostaria. Vou chamar isto de animação de forma. Dentro dos quadros-chave, você precisa especificar uma posição inicial e uma posição final, onde é animada e de onde é animada. Para este exemplo, vamos animar de vermelho para azul. Isso sozinho não vai funcionar. Você precisa dizer a seus quadros-chave qual elemento você gostaria de animar. Gostaríamos de animar a praça. Dentro quadrado, nome da animação é o nome que escolhemos abaixo, que é shape-animation. Então, semelhante às nossas transições, você deve especificar uma duração. Digamos dois segundos. Lá vamos nós, animamos a cada dois segundos. Agora, o que acontece se você quiser animar mais etapas entre o de e o para. Bem, essencialmente estes são construídos a partir de porcentagens. Começaríamos em zero por cento, então a animação termina em 100 por cento. Vamos adicionar um ponto médio, digamos, 50 por cento. Vamos mudar a cor de fundo para verde, e vamos mudar a forma do nosso quadrado. Vamos dar-lhe um raio de fronteira de 50%. Lá vamos nós. Mudei para um círculo a meio caminho em 50%, depois para 100 por cento. Agora, você vai notar que o quadrado não termina em azul enquanto a animação termina em azul, mas então ele volta ao seu estado original de vermelho. Agora, se você quiser manter isso azul quando a animação terminar, vamos fazer isso. Há outra propriedade chamada animation-fill-mode. Gostaríamos que isso fosse para a frente, então vamos ver como isso funciona, e lá vamos nós, a praça está terminada em azul. Agora, vamos adicionar mais algumas propriedades de animação. Vamos agora mover a nossa forma. Vamos mover isso, girar os pixels para a direita, e 200 pixels para baixo. Lá vamos nós, em movimento diagonal. Vamos adicionar mais um passo. Então, 25 por cento, adicione outra cor. Vamos salvar amarelo, e vamos mover isso para a direita por 200 pixels, e ver como isso parece. Isso é muito rápido, eu vou ter que mudar isso para quatro segundos. Seria bom ter um terceiro passo onde este quadrado, basicamente, gostaríamos que ele se movesse para a direita, depois para baixo, depois para a esquerda aqui, depois para a sua posição original. O que eu vou fazer é fazer isso 75%, e eu vou transformar: traduzir a posição para zero, 200 pixels. Vamos ver como isso parece. Lá vamos nós. Neste exemplo, não é necessário especificar 100 por cento porque o estado original é 100 por cento. É essencialmente zero e 100 por cento. Depois que o quadro-chave atinge 75%, se o quadrado está aqui embaixo ou a forma está aqui embaixo, ele então reverterá ao seu estado original. Há outra propriedade que eu gostaria de mostrar a vocês, animation-iteration-count. Se definirmos isso para infinito, como você pode imaginar, a animação continuará para sempre. Agora, vou comentar isto, para que isto não me dê dor de cabeça. Lá vamos nós, parou. Agora, assim como eu mostrei a vocês com a propriedade de transição, há uma maneira abreviada de escrever isso, apenas animação. Podemos especificar shape-animação, e, em seguida, a nossa duração, e, em seguida, o nosso modo de preenchimento. Você pode incluir funções de temporização da mesma maneira, uma propriedade de atenuação como esta. Se eu apagar isso, deve funcionar exatamente da mesma maneira, lá vamos nós. Há uma propriedade agradável flexibilização adicionado a ele também. Agora, assim como a propriedade de transição novamente, você pode adicionar uma duração de atraso. Você pode especificar quando a animação começa. Digamos dois segundos. Depois de dois segundos, nossa forma se anima, e aí está. Você pode ver como é fácil criar uma animação de várias etapas. 7. Configuração de projetos: Vamos começar a trabalhar em nosso projeto juntos. Agora, antes de começar a codificação, vamos dar uma olhada na configuração do projeto para que você tenha tudo o que precisa. Vou mostrar-lhe passo a passo como eu vou estar colocando meu site de página única junto do meu artista favorito. Mas em vez de copiar meu código exatamente, certifique-se de pegar o que está aprendendo e aplicá-lo ao seu próprio site. Claro que você pode usar as transições e animações que eu vou mostrar no meu projeto, mas eu peço que você crie o seu próprio. Agora, dentro de uma pasta de projeto, você precisa criar um arquivo HTML de índice para sua marcação de página da Web, um arquivo style.css, e isso é para seus estilos animações anuais, e uma pasta para suas imagens. Agora, no que diz respeito às imagens, eu simplesmente obtive as minhas da Internet, o que eu normalmente não recomendo que você faça. No entanto, como você está seguindo um tutorial e não criando um site de produção, você não precisa se preocupar com problemas de direitos autorais. Para hospedar seu projeto em uma página para que todos vejam e para que eu e outros possamos lhe dar feedback, mostrarei como hospedar seu projeto no GitHub Pages. É completamente gratuito e é fácil de fazer. Agora, se você ainda não tem uma conta do GitHub, acesse github.com e inscreva-se. Agora, eu já tenho uma conta, então eu não vou passar por todo o processo, mas basta seguir as instruções na tela e você será definido. A maneira mais simples de enviar seu trabalho para o GitHub é baixar e usar o GitHub Desktop. Você pode baixar isso em desktop.github.com. Usando o GitHub Desktop, você poderá tirar instantâneos de cada etapa do seu trabalho e, no final, terá todo o seu trabalho pronto para hospedar no GitHub Pages. Vou te mostrar como fazer isso durante todo o projeto. Quando você tiver o GitHub Desktop funcionando, certifique-se de que você está atribuído como sua conta do GitHub. Se você não tem certeza de que está, basta ir para Preferências na parte superior aqui, e lá eu posso ver que eu estou realmente conectado à minha conta. Agora, vamos criar um novo repositório para o seu projeto. Para fazer isso, vá para Arquivo e Novo Repositório. Agora nome do repositório, vou chamar isso de Transições Deftones, e você precisa selecionar o caminho para o qual você gostaria de criar seu repositório. Vou clicar em “Criar projeto”. Agora, se eu apenas mover isso aqui, você pode ver que ele criou a pasta Deftones Transitions aqui. Agora, você deve se certificar de que seus arquivos que criamos no início desta lição estão contidos dentro dessa pasta de repositório. Eu só vou mover aqueles lá dentro, e lá estão eles. Agora, vamos aumentar o tamanho disso novamente. Agora, temos o nome do nosso repositório aqui, e você pode ver na guia Alterações, temos novos arquivos para confirmar, e esses são realmente nossos arquivos que criamos anteriormente. Agora, para cometê-los, devemos escrever uma pequena mensagem para ir com o commit, e eu vou chamar isso de commit inicial. Eu só vou entregar isso para a filial principal, assim. Agora precisamos publicar nosso trabalho no GitHub, e para fazer isso, basta clicar em “Publicar repositório”. Agora certifique-se que você está feliz com o nome. Só vou clicar em “Publicar”. Em alguns segundos, deve ser empurrado para cima. Ótima. Para ter certeza de que nosso trabalho está no GitHub, você pode clicar em “Ver no GitHub” aqui. Então, desde que você esteja conectado à sua conta do GitHub, você poderá ver seu nome de usuário aqui, o repositório que acabamos de criar e seus arquivos. Ótima. Agora você deve ter tudo o que precisa para começar a codificar seu projeto. 8. Projeto - HTML: Agora, se você abrir seu arquivo HTML em seu editor de código favorito, eu estarei usando VS Code aqui, vamos começar a trabalhar em nossa marcação. Agora, obviamente, vou codificar meu site de página única. Mas basta dar uma olhada no que estou fazendo e ver como você pode aplicar as coisas que você estará aprendendo em seu próprio site. Em VS Code para modelar um arquivo HTML, eu posso apenas apertar ponto de exclamação e tabulação. Usando o plugin Emmet em VS Code, isso me dá um bom arquivo HTML base. Minha página será sobre os Deftones, então mudarei o título lá. Precisamos vincular a uma folha de estilo. Mais uma vez, link para a nossa folha de estilo e o href será style.css que é de fato a nossa folha de estilo aqui. Em primeiro lugar, vamos analisar a construção de um cabeçalho. Agora, vou criar uma div dentro do cabeçalho com uma classe de envoltório. Agora, embrulhe eu vou usar em todos os meus componentes para que todos tenham a mesma largura. Vamos dar uma olhada no h1. É um belo e grande cabeçalho com o nome do seu artista favorito. Então eu vou estar construindo um menu de navegação. Dentro disso, haverá uma lista não ordenada, e haverá alguns itens da lista dentro. Vou dar a cada âncora, uma classe de nav__anchor. Estes não foram realmente clique em qualquer lugar como ele apenas para apresentação, então eu vou apenas adicionar um # lá. Vamos ter um falso sobre página, copiar e colar aqueles sobre. Vamos ter um sobre blog, e vamos ter uma página de contato. Chega de navegação. Agora, fora do cabeçalho, vou incluir uma seção de imagem. Vamos dar uma div ou imagem seção na verdade. Eu vou fazer essas tags de seção, e então dentro vamos usar o envoltório. Vamos criar uma div com classe de image-seção imagem-container. Então lá dentro, teremos uma boa imagem de fundo. Como é uma imagem de fundo, não usarei a tag de imagem. Farei isso em um div. Vou dar a isso uma classe de imagem-seção__image. Agora, para a imagem de fundo, vamos criar um link para aqui usando uma tag de estilo embutida. Background-image, URL, e, em seguida, precisamos vincular a nossa primeira imagem, e eu vou ter salvo essas dentro de pasta de imagens, então images/image-1.png. Por baixo, vamos criar uma tag de parágrafo. Podemos criar um pouco de texto e eu vou dar que uma classe imagem-seção__text. O que devemos escrever aqui? Vou escrever sobre minhas músicas favoritas por eles. Claro, o conteúdo que você incluir pode ser qualquer coisa que você quiser. Você não tem que me copiar. Se eu escrever a música 1, vamos colocar isso em uma nova linha, então eu vou usar uma tag break lá. Kimdracula é uma das minhas músicas favoritas por eles, então vamos incluir isso. Agora. Vou incluir mais algumas imagens. Vamos copiar esta div, colá-la em mais algumas vezes. O que precisamos mudar aqui é incluir minha segunda imagem. Então música favorita número 2, eu gosto de algo chamado hexagrama. Imagem número 3, vamos mudar isso. Minha música favorita número 3. Que tal em volta do pêlo? Agora, antes de seguir em frente, vou abrir isso em um navegador da web. Você pode apenas encontrar o arquivo HTML, clicar duas vezes sobre isso, e isso será aberto em seu navegador. O que vou usar é ir ao vivo aqui em VS Code. Esta é uma extensão, se você ainda não tem. Procuramos por servidor ao vivo, é este de cima aqui. Agora, o que isso me permite fazer é, quando começamos a trabalhar neste CSS, você verá as atualizações imediatamente dentro do navegador. Eu só vou abrir um servidor ao vivo, e vamos dar uma olhada no navegador. Encolher isto. Lá vamos nós. Aqui está o nosso primeiro pedaço de conteúdo. Vamos seguir em frente. Agora, eu quero incluir uma seção com mais alguns textos, mas alguns botões para que possamos brincar com algumas animações sobre os botões. Vou criar uma seção aqui com uma classe de grupo de texto. Novamente, incluiremos o embrulho. Em seguida, dentro do wrap, vamos criar um text-group__container, que contém tudo, e então vamos pensar sobre nossos textos. Usamos um parágrafo, text-group__text. Toque na cruz. Então vamos incluir algumas informações sobre a banda. Vou escrever sobre de onde eles são. Deftones é uma banda de metal alternativo de Sacramento, Califórnia. Primeiro pedaço de conteúdo. Agora, vamos incluir um botão que podemos animar, passar o mouse. Vou usar duas seções aqui. Duas seções de texto, que terão dois botões. Vamos chamar este botão, vamos dar-lhe uma classe de botão duplo. Vamos dar um href a isto. Isso não está clicando em nenhum lugar, então vamos apenas usar um # lá. Em seguida, a chamada à ação pode ser, clique aqui. Como eu disse, vou fazer isso duas vezes, então vamos copiar o recipiente, colá-lo abaixo. Então o que posso escrever sobre a banda? O que posso fazer é talvez falar sobre os membros da banda. O membro é, Chino, que está nos vocais, Stephen, que está na guitarra principal, Sergio, que está no baixo, Abe, que é um baterista incrível, e então Frank, que é o DJ e as teclas. Ótimo. Um pouco de conteúdo de texto. O segundo botão já está pronto para ir. Agora, como mencionado, você não tem que me seguir exatamente. Você pode alterar a maneira como o nav funciona, alterar os links de navegação. Você não precisa ter uma seção de imagem, ou se você tiver, ela não precisa vir antes da seção de texto e dos botões. Basicamente, o layout depende de você. Quando chegamos às animações, novamente, cabe a você. Vou mostrar-lhe vários estilos e técnicas que você pode usar, então tente aplicar o que você está aprendendo à sua própria página à sua maneira. Esses dois botões compartilharão a mesma animação de transição. Eu gostaria de um terceiro botão que tem sua própria animação única, então eu vou adicionar uma seção aqui. Vou dar-lhe uma classe de seção de texto. Lá dentro, teremos o nosso envoltório. Então, novamente, vamos ter um parágrafo texto-seção__text. Vamos incluir um pouco mais de conteúdo. Vamos falar do meu álbum favorito. Eles produziram nove álbuns de estúdio, com White Pony sendo o meu favorito. Posso rolar isso para que você possa ver. Como eu disse, vou incluir outro botão. Vamos dar a isso uma classe de button-main, e a idéia para este botão autônomo é, eu vou estar usando algumas animações de quadro-chave em vez de transição. Mas vamos chegar a isso na próxima seção ou na seguinte seção quando fazemos algumas animações. O que eu gostaria que você incluísse em sua página é um rodapé. Dentro do seu rodapé, dentro do meu envoltório, eu gostaria que você incluísse apenas um parágrafo para dizer que o site é feito por você. Por favor, coloque seu nome aqui. Vou colocar o meu. O site é por mim. Excelente. Vou guardar isso, e podemos ver o conteúdo aqui à direita. Ótimo. Uma coisa antes de ir é, eu vou incluir algumas fontes personalizadas na minha página, que eu vou obter do Google Fonts. O que posso fazer é aumentar esse tamanho. Vamos ao Google Fonts aqui. Agora, estamos no Google Fonts. Você pode dar uma olhada. Podemos fazer uma rolagem e ver se há alguma fonte que você gostaria de incluir. Agora, eu já sei que eu quero usar a fonte alata. Quando você encontrar um que você gosta, se você apenas clicar sobre isso e, em seguida, selecionar o estilo, e, em seguida, à direita aqui, ele vai dar-lhe um link agradável que você pode incluir em seu arquivo HTML. Vou copiar isso e incluí-lo logo acima da folha de estilo. Simplesmente assim. Finalmente, antes de passarmos para a nossa folha de estilo, vou apenas comprometer o meu trabalho aqui. Usando o GitHub Desktop, você pode ver que o índice é o pai em que estávamos trabalhando, e este é todo o nosso novo conteúdo. Se quiser aumentar o seu trabalho, pode fazer o mesmo que eu. Eu só vou escrever uma mensagem aqui, marcação de recurso. Eu vou cometer isso, e então eu vou empurrar isso para o GitHub. Agora, vamos passar para os nossos estilos. 9. Projeto - CSs: Quando estiver satisfeito com sua marcação, abra sua folha de estilos, style.css e vamos começar a adicionar alguns estilos a uma página. No meu, vou selecionar tudo e apenas incluir alguns estilos de base. Vou incluir box-size, border-box e vou incluir a família de fontes, que incluirá a fonte do Google que eu escolhi. Vamos remover todas as margens. Vamos remover todo o preenchimento. Agora, minha classe de envoltório, eu agora quero fazer minha largura máxima de todos os componentes para ser 940 pixels. Vamos adicionar algum preenchimento lateral de 20 pixels. Vou exibir, flexionar todos os meus componentes. Vamos alinhar os itens a serem centralizados. Conteúdo justificativo para ser espaço entre. Claro que a margem, vamos fazer zero na parte superior e, em seguida, auto na esquerda e direita, então tudo está centrado. Podemos ver nossas fontes funcionando bem lá. Agora, vamos começar a descer a página. Primeiro, vou incluir o cabeçalho. Vou dar a isto uma cor de fundo de uma cor dourada. Vou encorajá-los a escolher suas cores, então não copiem as minhas. Preenchimento superior e inferior de 20 e, em seguida, zero esquerda e direita. Primeiro, vamos dar uma olhada nesse navegador. Eu vou exibir flex as crianças e justify-content, vamos adicionar algum espaço entre. Agora vamos direcionar cada item da lista. Vamos remover os pontos de bala. Tipo de estilo de lista, nenhum e, em seguida, vamos dar a todos uma margem esquerda de 50 pixels. Lá vamos nós. Você pode ver que tudo está espaçado agora. Agora, as âncoras. Para todas as âncoras, eu vou remover o sublinhado, então decoração de texto, nenhum. Então, para as âncoras de navegação. Deixe-me verificar se essa é a classe correta. Sim, é. Anchor Nav, vamos fazer estes pretos. Vamos dar um tamanho de fonte de, digamos, 20 pixels. Nossa posição, parente. Estamos nos moldando bem. Vamos passar para a nossa seção de imagens. Classe de seção de imagem. Vou ter certeza de que há uma cor de fundo de preto. Seção de imagem e, em seguida, temos a classe recipiente imagem que está dentro. Você vai dar-lhes um transbordamento de escondidos. Isso se tornará aparente quando começarmos a trabalhar na transição ou na animação sobre essas imagens sobre o porquê de eu estar incluindo overflow oculto. Voltaremos a isso. Como eu tenho três imagens, vamos ter certeza que elas são todas uma terceira, então 33,3 por cento de largura. Agora, para as próprias imagens, seção de imagem__ imagem. Vamos exibir, flexionar essas imagens, alinhar itens. Vamos ter certeza de que eles estão no centro e o mesmo para conteúdo justificado, certifique-se de que eles estão no centro. Vamos dar-lhes algumas dimensões. Altura, vou fazer 400 pixels. Então vamos dar-lhes um estofamento. Nada na parte superior e inferior, mas 20 pixels para a esquerda e para a direita. Agora, o fundo em si para a imagem de fundo. Não quero repeti-los. Vamos ter certeza que eles estão centrados, então 50%. Então, para o tamanho, eu quero que a imagem cubra esse espaço assim. Nem todas as imagens estão aparecendo. Deixe-me ver se está tudo correto. Imagem dois e três. É por isso. Temos PNG para um, JPEG, JPEG para dois e três, é por isso que eles não estão emparelhando. JPG e há nossas outras imagens. Agora o plano para o texto da imagem. Minha música favorita aqui. Minha ideia é que quando passarmos o mouse sobre as imagens, eu quero que o texto apareça. Atualmente não está lá. Depois, pairamos sobre ele, parece. Vamos dar a este texto alguns estilos iniciais, mas não vamos nos preocupar com as animações até mais tarde. Vou dar ao texto uma cor de fundo ligeiramente preta, mas com meia opacidade. É transparente. Zero, zero, zero para preto e, em seguida, 0,5 para 50 por cento opacidade e, em seguida, vamos fazer o texto em si para ser branco f f f f tamanho da fonte, vamos fazer este 20 pixels, texto alinhar para ser centrado e então você pode vê-lo lá. Inicialmente faremos a opacidade zero e aumentaremos a opacidade para um quando adicionarmos a transição. Voltaremos a isso. O texto abaixo, outro texto de grupo de texto. Vamos dar-lhes uma margem inferior de 25 pixels. O contêiner do grupo de texto, que eu esqueci. O contêiner [inaudível] vamos dar a isso algum preenchimento de 50 pixels ao redor. Isso é melhor. Agora os próprios botões. Todos os botões manterão alguns estilos semelhantes. Fundo, vamos remover isso e, em seguida, vamos adicionar nossa própria borda de borda sólida dois pixels e, em seguida, preto. Certifique-se de que o cursor é realmente um ponteiro. Vamos aumentar o tamanho da fonte para 18 pixels. Vamos dar aos botões algum preenchimento de cinco pixels superior e inferior, 20 pixels à esquerda e à direita e eu vou certificar-me de que a posição é relativa. Eles estão com bom aspecto. Mais uma vez, voltaremos para as animações sobre esses botões. Vamos passar para esta seção de texto. Seção de texto, cor de fundo de, vamos dar-lhe um cinza de e e. Preenchimento superior e inferior de 50 pixels e zero esquerda e direita. Vou precisar remover o cólon ali. Isso é melhor. Agora, vamos dar alguns estilos para o contorno dentro desta seção de texto. É um pouco diferente, então exiba flex. A razão pela qual é diferente é porque eu quero que a direção flexível esteja em uma coluna, não em uma linha. Agora eles estão acima um do outro, o texto e o botão. Agora, vamos alinhar os itens a serem centralizados e faremos o mesmo para justificar que o conteúdo seja central também. O texto em si, seção de texto__ texto. Vamos dar a nossa margem inferior de 25 pixels e alinhar texto para ser centralizado. Isso parece bom. Agora, o botão como parte desta seção de texto, então botão principal, eu acredito que demos a isso uma classe de. Eu não quero ver o cinza por trás dos botões, então vamos dar a isso uma cor de fundo de branco. Então, finalmente, se descermos. Vamos dar uma olhada neste rodapé. O rodapé, eu vou fazer este preto para se encaixar com o design, mas [inaudível] de preto. Então, novamente, assim como o nosso nav, eu vou dar a cor desta bela cor dourada. Isto corresponde. Role para baixo. Sim, agora esse é o estilo. Você pode adicionar um pouco de preenchimento ao redor. Vamos dar preenchimento de 20 pixels. Vou me certificar de que o alinhamento de texto está no centro. Vamos apenas aumentar a largura. Vamos ver como isso está se formando. Sim, isso parece bom. Esses são os estilos base ou os estilos estáticos para o meu site de página única. Agora, à medida que você progride nas lições, vamos começar a adicionar algumas transições e algumas animações de quadro-chave para realmente apimentar um pouco isso. Eu, é claro, só quero dedicar meu trabalho ao GitHub. Vou fazer isso agora. Podemos ver no arquivo de índice, este é o lugar onde eu mudei as imagens de PNG para JPEG e, em seguida, nossa folha de estilo é, é claro, todos os nossos estilos. Incluirei uma mensagem de confirmação do recurso, adicionarei estilos, confirmarei e enviarei. 10. Projeto - Nav Bar: Vou começar a adicionar algumas animações de transição aos meus elementos. Agora talvez não copie exatamente o que vou mostrar nas próximas lições. Mas pense nas técnicas que estou mostrando e venha com algumas de suas idéias, suas próprias idéias para seu site de página única. Em primeiro lugar, vou pensar em animar esses elementos de navegação. Eu acho que o que eu gostaria de fazer é quando você passar o mouse sobre esses itens de menu, uma linha preta sai de baixo de cada palavra. Para fazer isso, eu vou primeiro e criar um pseudo elemento no nav_anchor. Este vai ser o nosso elemento subjacente. Então nav_anchor depois. Agora eu gostaria de fazer a cor ser preta. Vamos fazer a altura de dois pixels. Vamos ter certeza de que a largura é 100% de seu pai, que será a palavra acima. Como este é um pseudo elemento, você deve sempre incluir conteúdo, onde isso pode ser uma string em branco. Agora, precisamos posicionar este absoluto, que podemos fazer porque o pai está posicionado em relação e agora você pode ver as linhas desenhando lá. Agora vamos pensar sobre onde gostaríamos de colocá-lo. Inferior menos cinco pixels por isso está abaixo, e depois à esquerda, queremos ter certeza que este é zero, então é à esquerda da palavra. Isso parece bom. Acho que agora podemos começar a pensar na nossa animação. Agora por baixo de todos os nossos estilos estáticos, eu vou apenas escrever um comentário aqui que pode ser pairado e em seguida, todas as nossas animações e transições podem ficar aqui abaixo. No nav_anchor, quando passamos o mouse sobre ele, queremos direcionar para o elemento depois. Agora, para aprofundar isso, eu vou usar a escala de transformação x, que significa horizontalmente, então esquerda e direita, e nós queremos definir isso para a largura total, que será um. O que isso significa é que quando voltamos para nossos estilos estáticos, precisamos ter certeza de que o elemento após, a escala x é inicialmente definida como zero, e eles desaparecem. Agora, quando se trata de nossa transição, queremos direcionar a transformação porque é isso que estamos buscando aqui. Eu vou fazer isso mais de 0,2 segundos e eu vou usar a flexibilização de ease-in-out. Agora vamos ver como isso se anima. Ótimo, do centro. Agora, se você quiser animar, digamos da esquerda para a direita, aqui é onde você pode usar a origem de transformação porque isso indicará onde está a posição inicial. Se eu definir isso como 0, 0, então x e y, você pode ver que a linha desenha da esquerda para a direita. Mas gosto que se mova do centro para fora. Então vou deletar isso. Ótima. Agora, quando você estiver satisfeito com suas animações, não se esqueça de submeter seu trabalho no GitHub desktop e enviar seu trabalho para sua conta do GitHub. 11. Projeto - imagens: Agora eu vou pensar sobre como eu gostaria de animar essas imagens, que devem ter algum texto que aparecerá na frente delas uma vez que você passar o mouse sobre as imagens. Agora, no texto da imagem, a opacidade está definida como zero. Se apenas definirmos isso para um, você pode ver o texto lá. Agora, por alguma razão que o texto não está sentado onde eu quero, ele deve estar no centro aqui. Imagino que há algo errado com nossa marcação, e de fato há, esse texto deve estar dentro da div imagem. Deixe-me atualizar isso, e o último. Se guardarmos isso, lá vamos nós, muito melhor, é onde o texto deve estar. Ótimo. Vou ajustar a opacidade de volta a zero, porque é nisso que vamos animar. Uma vez que estamos aqui, vamos fazer a transição, e é a opacidade que estamos mirando, também os 2,2 segundos, e nossa facilidade entra para fora. Agora, vamos apontar a imagem. Image-section_image, então isso é o que vamos usar para passar o mouse e trazer o texto. Em seguida, é de fato os textos da seção de imagem que será animado em. Só precisamos ajustar a opacidade de volta para um. Tem smoothie chegando. O que eu gostaria de fazer com o texto, é talvez aumentar o tamanho dele, bem como a opacidade. O que eu vou fazer é na próxima escala de transição, e definir isso como um. Então, quando chegarmos ao texto, vamos definir a escala inicial para 0,8. Menor e, em seguida, aumenta de tamanho. A razão pela qual não é animada em como eu gostaria, é que isto deve ser uma transformação, não uma transição. Então também precisamos adicionar a transição aqui em si. Transforme 0,2 segundos, fique para fora. Tanto a opacidade quanto a transformação estão sendo direcionadas. Imagine que isso ainda não está funcionando porque eu acho que aqui. Sim, eu disse transição em vez de transformar. É um erro fácil de cometer, então não cometa o mesmo erro. Transição e transformação são muito diferentes. Lá vamos nós. Aí está a nossa transformação, a transformar-se. Além disso, eu acho que eu gostaria de adicionar algum movimento a essas imagens. Novamente, vou afetar a escala desta imagem. Na transição, vou atingir a escala de transformação. Transforme 0,2 segundos e vamos entrar e sair. Então, para a imagem em si, quando passarmos o mouse sobre ela, então eu vou apenas copiar isso. Podemos transformar a escala porque o padrão é um. Vou definir isso para 1.1, e então ver como as imagens ficam. Ótimo. Trabalhando perfeitamente. Agora, eu disse em uma lição anterior, que você não deve transformar a escala acima de 1,0 especialmente quando se trata de imagens. Agora, a razão pela qual estou fazendo isso aqui é porque eu sei que o tamanho total dessas imagens é muito maior do que essas dimensões iniciais do conjunto, e é por isso que as imagens não estão sendo pixelizadas. Ainda parece bem. Agora, depois de ter comprometido seu trabalho, vamos passar para a próxima transição. 12. Projeto - botões: Agora eu vou pensar sobre como eu gostaria de animar esses dois botões em pairar. Meu pensamento inicial está pairando, eu gostaria que um fundo dourado aparecesse de baixo para cima em uma transição agradável e suave. Para isso funcionar, vou criar um pseudo-elemento em ambos os botões e que formará o nosso fundo dourado. Para atingir esses dois botões e apenas esses dois botões, não o terceiro, preciso lembrar que classe demos a eles. Era botão duplo. Vamos usar isso. Apenas sob a nossa classe botão, vamos criar este pseudo após elemento. Sei que quero que o fundo seja a minha cor dourada. Devemos incluir conteúdo se este for um pseudo-elemento. Gostaria que a altura fosse eventualmente 100 por cento e há um ponto e vírgula lá. Vamos ter certeza que preenche o espaço dos botões, esquerda precisa ser zero. Para fazer isso, devemos ter certeza de que a posição é definida como absoluta, então topo pode ser zero. A largura deve ser 100%, porque estamos preenchendo o espaço. Lá vamos nós, e podemos ver o fundo aparecendo lá. No entanto, já não podemos ver o nosso texto. Portanto, precisamos definir o índice z para ser menos um, então ele fica atrás. Isso parece bom. O que vamos fazer a transição? Será escala de transformação desta vez. Por quê? Porque será o movimento vertical. Vou definir isto para ser zero, e ele desaparece. Com relação à transição, podemos direcionar a transformação 0,2 segundos ease-in-out. Você pode ver que há um tema comum aqui quando se trata da duração da transição. Eu gosto muito de usar 200 milissegundos, isso é apenas uma preferência, e eu gosto de usar ease-in-out como a flexibilização. Mas eu peço que você apenas experimente com seus próprios números e suas próprias funções de temporização e veja o que funciona bem para você. Role para baixo até nossa seção de focalização. A classe dupla botão em pairar, vamos ter como alvo o elemento depois e vamos definir transformar escala y, para ser um. Como é que isto parece? Está parecendo muito legal. No entanto, como eu disse, eu realmente não queria que ele aparecesse do centro para fora, eu queria que ele aparecesse de baixo. Isto novamente, é onde a origem da transformação pode entrar. Origem da transformação de deslocamento para ser zero e zero. Note que aparece de cima para baixo, estamos chegando mais perto. O que eu realmente preciso definir é a parte y ou transformar origens. Origem de transferência x é zero, y é atualmente zero, isso deve ser 100 por cento, então ele começa de baixo. Lá vamos nós. Aqui estão meus dois botões completos. Se você vai estar animando botões você mesmo, talvez tenha que pensar sobre como você pode animar possivelmente a fronteira. Você pode alterar a largura disso, ou a cor, ou talvez ao passar o mouse, você pode adicionar uma sombra, ou você pode alterar a cor do texto, ou afetar a opacidade. Há muitos aspectos do botão que você pode fazer a transição ao passar o mouse. Tenha um jogo ao redor e ver o que funciona bem para seus botões. Só vou dedicar meu trabalho ao GitHub. Na área de trabalho GitHub, podemos ver que estilos, aqui está o nosso botão dobrado após estilos, eo passar o mouse aqui para baixo. Então, basta escrever mensagem de confirmação, recurso, dois-pontos, transições de botão, eu vou confirmar isso, e então empurrar isso para cima. 13. Projeto - Keyframes: Nesta lição, vou mostrar a vocês como vou utilizar animações de quadros-chave para animar o botão final. Agora, minha idéia para minha animação de quadro-chave é quando você passa o mouse aqui, a largura da borda aumenta em tamanho, e eu vou fazer isso até que você afaste o mouse. Vamos construir esta animação de quadro-chave. Enquanto estamos na seção pairar, vamos fazer @keyframes e eu vou chamar isso de BorderGrow e isso pode ser nomeado qualquer coisa que queremos. Em zero por cento, o estilo inicial terá uma borda, dois pixels sólidos, e isso será preto. Então, 000. Na verdade, não será a fronteira que vou animar, mas será na verdade a sombra da caixa. Isso dará a ilusão da fronteira crescendo em tamanho. A sombra da caixa será 000, então o pixel não estará lá, e isso será preto. Em seguida, o quadro-chave final, então um 100 por cento. Então, a etapa final do quadro-chave. A borda permanecerá como está, mas a sombra da caixa será 00, mas então espalhará dois pixels por dois pixels e ainda será preta. Então, quando pairamos sobre o botão principal, então botão traço principal do cólon pairar. Vamos adicionar a animação, que é chamado BorderGrow. Vou fazer isso bem devagar em um segundo. Eu só quero que a função de temporização seja linear, então eu não vou usar ease-in-out e eu quero que isso se anime para sempre. Bem, até removermos o mouse do botão, vamos ver como isso parece. Está quase lá, mas como você pode ver quando a sombra da caixa está em sua largura total, ela se encaixa de volta ao seu estado original, o que não queremos. O que eu gostaria de acontecer, é crescer em tamanho e, em seguida, fazer a transição para trás, não recuar. Podemos fazer isso usando a palavra alternativa. Isso alternará para frente e para trás entre a animação. Assim mesmo, isso é ótimo. Enquanto eu estou aqui, porém, eu gostaria de fazer a cor de fundo para ser ouro. Isso significa que só precisamos adicionar uma transição agradável aqui para cor de fundo 0,2 segundos, ease-in-out. Lindo. Isso está parecendo bom. Finalmente, vamos dedicar o nosso trabalho. Recurso. Botão, quadro-chave, animação, e eu vou fazer uma mensagem, e nós vamos confirmar este trabalho e, em seguida, empurrar este trabalho para cima. Vamos dar uma última olhada na aparência do meu site de página única. Estas são as nossas transições de navegação, eu tenho algumas imagens agradáveis e texto, algumas transições de botão sobre o mouse, e uma animação final quadro-chave. Como nas lições anteriores, vou encorajá-los a experimentar seus próprios estilos, suas próprias transições e suas próprias animações de quadros-chave. Tente não copiar exatamente o que eu fiz e ver o que você pode inventar. Na verdade, quando se trata de suas animações de quadro-chave, você pode querer incluir muitos mais passos do que eu fiz aqui. Eu só tenho um passo inicial maneira terminar etapa, mas você pode querer ter algumas etapas provisórias com sua animação quadro-chave. Mas brinca e vê com o que estás feliz. 14. Compartilhando seu projeto: Depois de confirmar e enviar seu último trabalho no GitHub Desktop, acesse sua conta no github.com e clique em seu repositório. Então o meu é chamado deftones-transições. Em seguida, você verá seus arquivos de origem. Tenho a minha pasta de imagens, temos o meu ficheiro de índice, os meus estilos aqui em baixo. À direita aqui, podemos ver que houve oito internações. Se eu clicar nisso, você pode ver a lista de commits de lições anteriores, e a mais recente foi a animação do quadro-chave do botão. Isso é tudo bom. Está tudo presente e bem. Quando se trata de publicar sua página no GitHub Pages, você precisa entrar em configurações. Em seguida, vamos rolar para baixo até a parte inferior da página. Você verá que o GitHub Pages está aqui. Mas ele diz, eu não sou capaz de publicar isso ainda porque eu preciso ter certeza que o repositório é público e está definido atualmente como privado. Abaixo diz, altere a visibilidade do repositório. Este repositório é privado no momento. Eu vou mudar isso, e vou tornar isso público. Para confirmar isso é o que eu quero fazer, ele diz, por favor digite e, em seguida, o nome do meu repositório, então meu nome completo e, em seguida, deftones-transitions. Para confirmar, eu entendo, e eu quero alterar a visibilidade do repositório. Vamos fazer isso. Agora isso está definido como público. Se deslocarmos para baixo até as Páginas do GitHub, você poderá ver algumas opções aqui. Em primeiro lugar, a fonte. Precisamos dizer ao GitHub qual nome de ramificação queremos que o GitHub Pages veja. Estivemos empurrando nosso trabalho para a filial principal, então é isso que vou selecionar aqui. Então está na raiz do diretório, então podemos deixar isso como está e eu vou clicar em Salvar. Uma vez que isso permitir, vamos rolar de volta para a área e ele diz, seu site está pronto para ser publicado, e ele nos dá uma bela URL aqui. Se verificarmos isso, talvez ele ainda não esteja pronto, mas isso acontece porque o GitHub Pages levará alguns minutos para publicar seu último trabalho. Vamos abrir isso, abrir uma nova página em uma nova guia, desculpe, vamos clicar nisso. Na verdade, está tudo publicado e pronto para ir. Todas as nossas animações estão aqui, todas as nossas transições estão aqui, e este é o URL do meu site de página única publicado. Eu encorajo você a compartilhar o URL para seu site publicado GitHub Pages e talvez escrever sobre as transições que você adicionou adicionando tudo isso à seção de seu projeto da classe. Agora, isso me permitirá oferecer-lhe qualquer feedback e sugestões. Eu também encorajo você a interagir com os outros alunos, para que você possa oferecer um ao outro algum apoio. Claro, se você tiver alguma dúvida ou precisar de alguma dica, então por favor me avise. É óbvio que estou feliz em ajudar. 15. Resumo: Grandes parabéns por completar este curso. Você conseguiu me acompanhar e criar seu próprio site de página única cheio de transições e animações. Agora você deve ter uma compreensão bastante decente dos vários aspectos de animações CSS e transições que agora você pode utilizar em seus futuros projetos web. Espero que você faça exatamente isso. Agora você será capaz de oferecer muito mais como um desenvolvedor web e ser capaz de demonstrar suas novas habilidades encontradas na criação de sites dinâmicos. Finalmente, eu só quero dizer um grande obrigado por se inscrever neste curso. Realmente significa muito. Sem o seu apoio, eu não seria capaz de criar conteúdo como este. Eu realmente espero que você tenha aprendido alguma coisa com essas lições. Eu realmente espero que você tenha gostado deste curso, e se você fez, por favor tire um tempo para deixar uma revisão do curso, ele realmente faz uma grande diferença. Com isso sendo dito, muito obrigado, agora vá em frente e código.