Animação em CSS: aprendizado rápido

1. Introdução: Olá e bem-vindo. Ian , entre no atalho E estou muito feliz em ter você aqui neste curso rápido e focado dedicado inteiramente às propriedades de animação CSS Se você sempre quis adicionar animações suaves e atraentes às suas páginas da web, mas se sentiu sobrecarregado com longos tutoriais ou bibliotecas de JavaScript, esta aula é Em apenas meia hora, explicarei tudo o que você precisa saber para iniciar a animação CSS. Abordaremos as propriedades de animação do código como nome da animação, duração, função de temporização, contagem de iterações, direção e movimento Você aprenderá como combiná-los forma criativa e dar vida às suas páginas da web, tudo sem escrever uma única linha de Javascrit É uma aula de aprendizado rápido, então vamos nos aprofundar em exemplos práticos. Ao final, você estará pronto para criar animações suaves Então, vamos começar e fazer seu site se mover. 2. Animação em CSS com quadro-chave: Olá, bem-vindo à nova seção deste curso onde falaremos sobre animação CSS. Nessa seção, aprenderemos sobre quadros-chave. A forma como a animação CSS e quadro-chave funcionam é muito simples Primeiro, você precisa definir uma regra de animação CSS e pode nomeá-la com o nome que quiser. Em segundo lugar, você pode adicioná-lo a qualquer elemento de toque que desejar animá-lo É assim que a animação funciona em nossas páginas. Vamos tentar entender com a prática. No início, dentro da etiqueta corporal, vou criar uma etiqueta profunda, profunda e simples Então, como você pode ver no meu diretório de trabalho atual, eu já criei um arquivo CSS, estilo dot CSS, e vou vincular esse arquivo CSS de pontos de estilo a este documento tamal, então digite link Dentro da tag de link, Amour pass style dot CSS Então, dentro do arquivo CSS de estilo, primeiro, vou selecionar a tag body, body e dentro da tag body, aqui vou atribuir margem. Margem zero de todas as direções aqui eu pego a margem zero, então precisamos estilizar o desenvolvimento. Para isso, vou definir sua estagnação v. Então, dentro das panturrilhas, primeiro, vou atribuir maconha, maconha, 150 pixels Então eu vou atribuir a altura. Altura, altura atribuída por Hemod, 150 pixels, é um quadrado Por fim, vou atribuir uma cor de fundo, cor de fundo e quero uma cor vermelha. Vou configurar esse arquivo, configurar esse arquivo, vamos voltar ao navegador. Então, como você pode ver, estamos no navegador da web. Se eu redirecionar meu navegador, você poderá ver o resultado. Aqui criamos uma caixa quadrada. Está aqui mesmo. Agora, vamos ver como podemos aplicar animação e quadros-chave nela Então, vamos para o código do estúdio de resultados e vamos pular para o arquivo CSS de pontos de estilo. Então, a primeira coisa que precisamos fazer definir uma regra de animação. Para isso, precisamos digitar nos quadros-chave de taxa, KEY FRA As, este, e então você precisa usar um nome de animação No nosso caso, em movimento. Então, dentro do clipe e, em seguida, dentro dos cálices aqui, você precisa usar Kord como from Aqui, vou começar com Kord dentro das calices, vou usar uma propriedade chamada transform transform. Vou usar translate value translate Eu quero mover esse elemento na direção XX. Aqui eu vou usar o translate X. E eu vou passar zero Em seguida, vou usar duas palavras-chave. Vou digitar dois e, dentro do surge, quero transformá-lo em até 1.000 pixels. Vou usar a propriedade transform, transform. Então, dentro da propriedade transform, vou usar translate X, e aqui vou passar 1.000 pixels. Não 100, 1.000. Isso moverá o elemento de 1.000 pixels na direção Xxs. Então, o que basicamente fizemos aqui? Criamos uma regra de animação chamada mover usando o quadro-chave. E essa regra de animação vai mover esse elemento de 02000 pixels na direção X. Se eu definir esse arquivo, acessar o navegador e recarregar esta página, nada acontecerá aqui Não há nenhum movimento acontecendo nesse elemento porque acabamos de criar a regra de animação aqui, mas não informamos ao navegador qual elemento receberá essa animação, qual elemento eu quero animar Então, precisamos definir a animação para o elemento que eu quero animar. E, como você sabe, queremos animar o elemento profundo, esse elemento Então, dentro desse elemento profundo, precisamos de um total de duas propriedades para animar esse elemento profundo O primeiro é o tipo de nome da animação, o nome da animação, e eu vou passar esse movimento. Depois disso, precisamos definir a segunda propriedade, que é a duração da animação. Animação sumária, duração. Aqui, precisamos definir quantos segundos são necessários para concluir a animação. Suponha que eu queira atribuir três segundos para concluir essa animação. Vou passar às três da manhã e vou configurar esse arquivo. Agora, depois de configurar este arquivo, se eu entrar no navegador, deixe-me mostrar e recarregar esta página, você pode notar que ele moverá esse elemento da posição zero para 1.000 na direção excessiva Deixe-me te mostrar. Então, sempre que eu recarrego meu navegador, você pode notar que ele moveu esse elemento a 1.000 pixels Se eu recarregá-lo novamente, você poderá notar claramente. Em seguida, volta ao seu próprio lugar. Durante o período de 3 segundos , ele completa a animação. Eu mudei o elemento de zero pixel para mil pixels. Aqui, basicamente, criamos essa animação com dois estágios. Mas agora vamos aprender como podemos animar mais de dois estágios. Se você observar as palavras Q que usamos e duas palavras-chave. Quero dizer, a animação mudará a posição do primeiro estágio para o estágio final, e isso aconteceu durante esse período específico, no nosso caso, três segundos. Agora, e se tivermos mais estágios e mais mudanças? Podemos dividir essa animação em diferentes estágios usando a ajuda de porcentagens O que precisamos fazer basicamente é remover a palavra-chave from. Mas antes de fazer isso, vou comentar e duplicar esta seção e comentar os códigos anteriores Eu não preciso disso. Agora, nessa seção, vou substituir de pelo valor percentual. Vou remover de e vou digitar 0%. 0% significa o ponto de partida da duração da animação, e então vou remover 22 Qard e substituir por 100% Isso significa 100% da duração da animação. Caso contrário, você pode dizer três segundos. Então, no 0% dessa animação, não movemos esse elemento, nós o colocamos nessa posição. Assim, a animação começará onde a animação estava originalmente. E então, no tempo de cem por cento dessa duração, eu quero colocar essa animação nessa fase. Traduza mil pixels. Portanto, está funcionando como está e nada mudou em relação às etapas anteriores. Se eu definir esse arquivo e voltar ao meu navegador, deixe-me mostrar a você e ao herói esse navegador, como você pode ver , está funcionando como está Então, vamos voltar ao editor de código. Usamos aço no total de dois estágios, mas podemos usar mais do que isso. Podemos fazer isso usando métodos percentuais porque isso pode nos dar muitas opções de 0 a 100% Agora vou adicionar outro valor percentual. Então, vou duplicar essa linha e, aqui, vou alterar o valor Vou fazer com que seja 50%. Na posição de 50%, quero mover esse elemento até 1.000 pixels na direção excessiva Mas na posição de 100%, quero mover esse elemento em: dos XXs, aqui eu o movo mil pixels e dos YxS, quero movê-lo em 500 E eu vou colocar esse arquivo. Então, aqui eu divido essa animação em três estágios. Com 0% de duração, quero começar esta animação. Então, com 50% da duração, quero dizer 1,5 segundo, quero mover esse elemento 1.000 pixels em direção excessiva. Então, em 100% do tempo, quero dizer os três segundos. Depois de completar três segundos, quero mover esse elemento nessa posição. Vamos enviar o arquivo e voltar para o navegador. Se eu recarregar meu navegador, agora você pode ver primeiro que ele moverá esse elemento dessa posição para essa posição e, em seguida, moverá esse elemento dessa posição para essa posição em 3 segundos Se eu recarregar meu navegador, você pode notar a movimentação rápida da animação Em 0,5 segundo, ele move esse elemento nessa posição. Em seguida, ele moverá esse elemento nessa posição e, por fim, voltará à posição original. Portanto, no início e no ponto médio da duração da animação, ele moveu o elemento dessa posição para essa posição e, do ponto médio ao final da duração, ele moveu o elemento dessa posição para essa posição Então, aqui dividimos essa animação em três estágios, mas podemos alterar o valor percentual da duração. Suponha que com 10% de duração, suponha que com 10% de duração, eu queira mover esse elemento eu queira mover esse elemento dessa posição para essa posição. Ele moverá rapidamente esse elemento dessa posição para essa posição. Então, para a distância restante, saltando de dez a 100%, levará 90% do tempo Suponha que se eu disser isso de dez segundos, dez segundos de duração, e aí está esse arquivo. Agora, ele completará a animação do primeiro corante ao segundo estágio Eu quero dizer que de 02, 10%, vai levar apenas 1 segundo. E nos nove segundos restantes, ele moverá esse elemento dessa posição para essa posição. Então, se eu aguentar três segundos definir esse arquivo e voltar para o meu navegador. Deixe-me te mostrar. Se eu recarregar meu navegador, agora você pode ver rapidamente que ele passará para o segundo estágio Então, demorou mais para concluir esse estágio. Deixe-me te mostrar. Se eu recarregar meu navegador, você poderá vê-lo concluído rapidamente e depois lentamente. Assim, podemos controlar a velocidade dessa animação usando o valor percentual na mesma duração Além disso, depende dos estágios. Nosso primeiro salto acontece muito, muito mais rápido porque usa apenas 10% dos três segundos. E durante 90% de três segundos, ele completará a animação, a animação do segundo estágio. É por isso que leva tempo. Então, isso é tudo para este tutorial. Na próxima parte deste tutorial, aprenderemos o modo de campo de animação. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 3. Contagem de iterações de animação: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à animação CSS e, neste tutorial, aprenderemos uma nova propriedade sobre animação, que é a contagem de iterações Usando a propriedade de contagem de iterações de animação, podemos dizer ao nosso navegador quantas vezes queremos repetir a animação, e essa propriedade sai dos valores como em número Se eu passar dois, ele repetirá a animação no total duas vezes. Então, se eu passar três, ele repetirá a animação três vezes. Estamos no meu arquivo CSS. No início, vou comentar sobre a propriedade de atraso de animação. E então eu vou usar a contagem de iteração de animação de chamada de propriedade , esta E vou repetir essa animação no total três vezes. Além disso, vou reduzir a duração da animação. Eu vou fazer isso em três segundos. Então, depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar esta página, agora você pode notar que essa animação será executada no total três vezes Então, neste código, como você pode ver, ele executa essa animação no total três vezes porque definimos a contagem de iterações três vezes Se você quiser executar essa animação por tempo infinito, sim, você pode. Deixe-me te mostrar como. Você só precisa usar a propriedade infinita e precisamos definir esse arquivo. Depois de configurar este arquivo, se eu voltar ao meu navegador e recarregar este navegador, agora você pode notar Agora você pode notar que essa animação será executada por tempo infinito. Isso não vai parar a animação. Isso não vai parar essa animação. Agora vamos voltar ao editor de código. Existe o uso dessa propriedade. Por enquanto, vou fazer três vou configurar esse arquivo e redirecionar meu Caso contrário, essa animação será executada para sempre. Depois de executar a animação três vezes, ele vai parar de executar a animação Agora, vamos voltar ao editor de código novamente. Vamos falar sobre outra propriedade, que é a função de temporização da animação. É muito semelhante à propriedade da função de temporização de transição, exceto pelos mesmos valores, que são lineares para dentro, para fora e para fora. Agora, vamos aplicá-lo. Então, vou fazer com que a iteração conte um, e aqui, vou aplicar a função de temporização da animação Animação, função de temporização, e eu vou usar sua propriedade. I. E o que é que faz com que os movimentos da animação comecem devagar, depois avancem mais rápido e terminem lentamente. E antes de executá-lo, vamos aumentar a duração para entendê-lo adequadamente. Então, vou fazer isso de novo em cinco segundos e vou configurar esse arquivo. E se eu entrar no meu navegador e recarregar esse arquivo, agora você pode ver que ele começa devagar e depois vai rápido Depois disso, novamente , termina lentamente. Já aprendemos sobre isso em nosso tutorial anterior e vamos tentar outro vedo Então, aqui no T está fora. E eu quero definir esse arquivo, que começa rápido e diminui a velocidade no final. Depois de configurar esse arquivo, se eu voltar ao meu navegador e recarregar meu navegador, como você pode ver, ele começa rápido e depois fica lento no final Então nós temos Es em. Começa devagar e mais rápido no final. Deixe-me te mostrar. Então Herodiza entra. Es nesta. E depois de configurar esse arquivo, se eu voltar ao meu navegador e depois recarregar esse navegador, como você pode ver, ele começa lento e rápido no final Não vou estender tudo isso porque já aprendemos sobre isso. Este é o exemplo da função de temporização de animação com valores diferentes. Linear, atenuar e sair. Espero que você já esteja familiarizado com isso. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 4. Modo preenchido de animação CSS: Olá alunos. Bem-vindo de volta. Esta é outra animação relacionada ao tutorial. E neste tutorial, vamos aprender animação, modo de arquivo. Em nosso último tutorial, movemos esse elemento profundo a 1.000 pixels na direção XX. Em seguida, movemos esse elemento na direção YxS de 500 pixels, algo assim Mas após o final dessa animação, esse elemento profundo volta ao seu lugar original. Mas agora eu quero manter essa posição final dessa animação naquele lugar. Sim, podemos fazer isso usando a propriedade do modo de filme de animação, que basicamente diz ao navegador o que fazer com esse elemento fora da janela de animação. Quero dizer antes do início e do fim da animação. E aqui vamos lidar com o segundo caso após o final da animação. E temos que dizer duas opções. A primeira é que ele pode estar de volta ao seu próprio lugar. Caso contrário, o elemento permanecerá em sua posição final, e faremos isso usando a propriedade de campo de animação. Então, vamos voltar ao editor de código do vis studio. E vou pular para o CSS find style dot CSS. Então, dentro desse seletor Gib, vou digitar o modo de preenchimento de animação, este, aqui temos que dizer quatro valores Nosso primeiro valor é nenhum. Se eu usar esse valor e definir esse arquivo, nada mudará nada. Deixe-me te mostrar. Depois de configurar esse arquivo, se eu voltar ao meu navegador e carregar meu navegador, agora você verá que não há alterações. É o trabalho como está e está de volta ao seu próprio lugar. Mas se eu usar o segundo valor, que são quatro palavras. Então, digite quatro palavras e defina esse arquivo. Forward aplica o último estágio da animação. Nesta posição, vou colocar esse elemento naquele lugar. Então, depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar, então se eu recarregar esta página, agora você pode notar que aqui você pode ver esses elementos permanecerem naquele lugar, a última posição da animação Esse elemento não retorna ao seu próprio lugar e também parece pouco realista. Além disso, temos outra propriedade, que é invertida. Para explicar isso, vamos voltar ao código de estúdio do usuário. Mas antes de usá-lo, vou usar a propriedade de atraso de animação. Atraso na animação, esse. Vou atrasar essa animação e Hemed em três segundos de atraso de três segundos, e vou substituí-la para que antes de começarmos a animação, ela espere Se eu definir esse arquivo e voltar para o meu navegador, agora você pode notar que depois de recarregar meu navegador, ele vai esperar três segundos Depois de três segundos, ele executará a animação e essas animações permanecerão naquele local. Esse elemento permanece naquele lugar. Agora, vamos ao código do Visual Studio. E se essa animação começar a partir dos 500 pixels, não do local original. Em vez da posição zero, quero atribuir 500 pixels do Xxs. Além disso, vou mudar a tendência de valor pessoal. Vou fazer com que seja 50%. Eu vou configurar este. Aqui eu preciso de um pouco mais de tempo para o movimento horizontal. É por isso que eu aumento o valor das passagens. Além disso, vou aumentar a duração da transição. Então, duração da animação do capacete, cinco segundos. Que possamos ver o que está acontecendo com ganância. Então, defina este arquivo se eu voltar ao meu navegador, deixe-me mostrar a você. Se eu recarregar esta página , você verá que ela colocará esse elemento nessa posição Depois de três segundos de espera, ele iniciará a animação a partir dos 500 pixels desta posição, deixe-me mostrar a vocês. Depois de recarregar meu navegador, como você pode ver, ele vai esperar três segundos Depois de três segundos, ele vai começar essa animação a partir deste lugar. Depois disso, em 5 segundos, ele completa a animação, aqui eu uso o modo de filme de animação para frente É por isso que permanece nessa fase. Mas você não esperava isso. Você acha que vai começar esse elemento a partir dos 500 pixels. Isso faz sentido porque definimos o ponto de partida dessa animação em 500 pixels, mas podemos fazer isso usando o modo filme. Se dissermos o modo de filme de animação ao contrário , podemos iniciar essa animação a partir dessa posição, não do local original. Deixe-me te mostrar como. Então, vamos voltar ao código do re studio, e aqui dizemos, se eu disser isso sem usar forward backward, este, esse valor, então defina esse arquivo e volte para o meu navegador E recarregue meu navegador, agora você pode notar que ele iniciará esse elemento a partir deste lugar Depois de três segundos de espera, ele iniciará a animação e concluirá a animação em 5 segundos. E então, para completar a animação, esse elemento volta ao seu lugar original naquela posição. Agora podemos resolver esse problema. Também podemos colocar esse elemento nessa posição. Se usarmos a propriedade do estande, isso corrigirá essa animação no último estágio. Deixe-me te mostrar. Aqui, em vez de usar para trás, se eu usar os dois e depois definir esse arquivo e voltar ao meu navegador e recarregar meu navegador, agora você pode ver que ele começa neste Além disso, após concluir a animação, esse elemento permanece nessa posição. Não está de volta ao local original. Então é isso que podemos fazer com a propriedade de um filme de animação. propriedade do modo de filme de animação nos diz de onde eu quero começar a animação e onde devo terminar É isso para este estúdio. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo estúdio. 5. Propriedade de direção de animação: Olá, pessoal. Bem-vindo à nova lição sobre este curso. Aqui vamos falar sobre uma nova propriedade de animação, que é a direção da animação. Usando essa propriedade de animação, podemos especificar a direção dessa animação e da propriedade, exceto o valor total de quatro. O primeiro valor é normal, que é o valor padrão, ele diz ao navegador para iniciar a animação do início aqui e ela terminará aqui. É o valor padrão. Vamos aplicar a propriedade. No começo, vou comentar essa linha e aqui vou amarrar a direção da animação. Iteração de animação e a primeira baixa que vou usar normalmente Antes de definir esse arquivo, vou aumentar o valor da contagem de iterações da animação, vou torná-lo três Vou configurar esse arquivo. Depois de definir esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar e recarregar meu navegador, agora você pode ver que ele executará a animação como está Dessa posição, ele iniciará a animação e, a partir dessa posição, encerrará a animação e executará a animação no total três vezes porque usamos a contagem de iterações três Esse é o valor normal. Agora vamos falar sobre o segundo valor que é invertido. Aqui eu vou usar em vez de usar o normal, vou digitar reverse e vou definir esse arquivo. Depois de definir esse arquivo, se eu executar essa animação, desta vez ela iniciará a animação da posição inversa. Começará a animação nesse ponto, nessa posição, e terminará a animação em 0%. Deixe-me te mostrar. Predefina esse arquivo Se eu voltar ao meu navegador e recarregá-lo, agora você pode notar que ele iniciará a animação a partir desse ponto e moverá o elemento na direção oposta Então, você pode ver que ele moveu o elemento na direção oposta e iniciou a animação dessa posição, e executará a animação no total três vezes porque usamos a contagem de iterações três Então é assim que funciona. Agora, vamos falar sobre o terceiro valor, que é alternativo e o que o alternativo faz. Primeiro, ele executará a animação do início ao fim. Em seguida, ele executará a animação do final ao início novamente. E se usarmos infinito , ele fará a mesma coisa repetidamente. Então, aqui, vou digitar alternativo. E desta vez, vou usar a contagem de iterações no total de três Então, defina esse arquivo. Se eu voltar ao meu navegador e recarregar meu navegador, agora você pode notar que ele executará essa animação de um ponto a outro, depois voltará para a posição anterior na direção oposta Agora, depois de concluí-la, novamente, ela volta para a posição e interromperá a animação porque usamos a contagem de iterações três, completamos a contagem de três, ela interromperá a animação Mas se eu usar infinito, deixe-me mostrar para desta vez eu vou usá-lo não conte infinito. E também vou reduzir a duração da animação. Vou fazer isso em dois segundos e vou configurar esse arquivo. Depois de ler este arquivo, se eu voltar ao meu navegador e reescrever esta página, aqui você pode ver o resultado É assim que vai funcionar e vai funcionar continuamente. No início, ele vai começar do início e pular para a posição final. Então, novamente, volta do fim ao começo e fará a mesma coisa várias vezes. Aqui, ele cria um belo efeito UU. Vamos aprender sobre o efeito UU quando aprendermos sobre o SAP Agora vamos dar uma olhada no código do estúdio do usuário. Por fim, temos outro valor que é inverso alternativo. Se usarmos um valor alternativo, ela iniciará a animação da posição zero desde o início. Mas se usarmos o inverso alternativo, ele executará a animação a partir da posição final. Em seguida, ele executará a animação na direção oposta à dos cem por cento. Se eu digitar alternate reverse e, em seguida, definir esse arquivo e voltar para o meu navegador, deixe-me mostrar que, se eu reverter meu navegador, agora você pode notar que ela iniciará essa animação a partir da posição final E fará a mesma coisa que a alternativa faz, mas inicia a animação a partir da imposição Então essa é a principal diferença entre todos esses locais. Agora, vamos falar sobre a propriedade principal da animação. Então, vamos ao código do Visa Studio. Agora eu vou te dizer como você pode usar uma propriedade de animação linear Você pode observar que, para executar a animação, usamos várias propriedades como nome da animação, duração da animação, modo de filme de animação, atraso da animação, animação, contagem de iterações, função de temporização da animação e direção da animação Podemos usar tudo isso em uma única propriedade. Para isso, podemos usar a propriedade de animação. Então, vou comentar todas as linhas. Em seguida, vou usar a propriedade chamada animação. Vamos combinar todas as propriedades em uma única animação de tipo de propriedade. Apenas uma animação simples. Primeiro, precisamos fornecer o quadro-chave, o nome da animação, que está se movendo Vou copiar o nome da animação e colá-lo aqui. Em seguida, precisamos fornecer um espaço e, depois disso, fornecer a duração da animação. Então, para usar três segundos. Depois disso, podemos usar todas as propriedades lado a lado. Suponha que, se eu passar no modo de filme de animação, possamos empatar os dois. Em seguida, espaço superior. A água não é obrigatória para isso. Só uma coisa: lembre-se: primeiro, você precisa passar a animação, depois a duração. Além disso, o veado não é obrigatório. Claro, passe pelos dois. Se você quiser fornecer atraso, então eu vou fornecer mais uma vez o atraso. Em seguida, no espaço superior, vou passar a contagem infinita de iterações de animação Depois disso, quero reproduzir a animação em alternativa. E se você quiser usar o tempo de animação, sim, você pode. Então, isso passa. Caso contrário, é você. Vou configurar esse arquivo. Aqui eu uso todos os valores um após o outro. Você só precisa seguir os dois primeiros valores. Foi no início quando passar o nome da animação, depois é preciso fornecer a duração. Depois disso, você pode passar qualquer valor e não precisa seguir nenhuma água para isso. Então, se eu definir esse arquivo e voltar ao meu navegador e recarregar esse navegador, você poderá ver o resultado Após 1 segundo de atraso, ele inicia a animação. Então, ele executará a animação alternadamente e executará a animação com sucesso Então é assim que podemos usar a propriedade da animação. Isso é para forro único. Espero que agora esteja claro para você como podemos usar animação CSS com quadro-chave Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial No próximo tutorial, iniciaremos os projetos relitando o quadro-chave de animação do quadro-chave 6. Animação de carro dirigindo: Olá, pessoal. Nesta lição, vamos criar essa linda animação infinita. Como você pode ver, temos um carro e uma moto andando neste passeio A ideia por trás desse exemplo é muito simples. Temos uma imagem de fundo que é esse passeio, temos duas imagens, uma para o carro e outra para a moto, e as imagens do carro e da moto não estão se Movemos o fundo do lado esquerdo para o lado direito e isso nos dá esse lindo efeito de direção. Vamos ver como podemos criar essa animação. Então, como você pode ver, finalmente, estou no meu coordenador do Visual Studio e já criei um documento HTML de índice de pontos de índice Com isso, eu já crio esse arquivo CSS de pontos de estilo. E, como você pode ver no meu diretório de trabalho atual, temos várias imagens. Temos imagem de imagem de fundo. Esta é a nossa imagem de fundo principal, e eu junto essa imagem de fundo várias vezes e crio uma nova imagem de fundo. E aqui eu junto essa imagem de fundo várias vezes e estendo a largura dessa imagem. Assim, podemos dirigir nossos veículos nessa estrada. Vamos pular para outra imagem, que é a imagem do carro. Vou usar essa imagem PNG do carro. Além disso, eu tenho outro veículo que é essa moto. Vou adicionar a imagem da moto e do carro nesta estrada e vamos mover apenas a imagem de fundo Vamos voltar ao arquivo de pontos de índice. Primeiro, dentro da minha tag corporal, vou criar uma etiqueta profunda, tecê-la e atribuir um plano de fundo para a classe Dentro desta etiqueta de mergulho, vou tirar duas imagens IMG Como fonte, vou passar o cartão cimag e também vou atribuir uma classe e o nome da nossa classe é Então eu duplico essa linha e aqui vou adicionar a imagem da moto, moto E é uma moto. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, eu já abro meu navegador usando meu servidor ativo. Então, se eu te mostrar meu navegador, é assim que ele se parece. Agora, em nosso elemento de fundo, precisamos adicionar a imagem de fundo. Vamos voltar ao seu código para os usuários, e eu vou entrar no arquivo CSS de pontos de estilo e vou começar nossa estilização Primeiro, vou selecionar o corpo da tag body. Dentro do Cariss, a primeira probidade, vou usar Margem, Margem zero Na segunda questão, vou usar o emparelhamento. O preenchimento também é zero. Vou configurar esse arquivo. Depois disso, vou trabalhar no plano de fundo. Vou trabalhar no elemento background deep, então vou copiar o nome da classe, o plano de fundo e voltar para o arquivo CSS do estilizador Vou selecionar esse fundo profundo usando o nome da classe. Em seguida, vou atribuir altura, altura e vou atribuir 100 alturas de janela de visualização Em seguida, vou atribuir o plano de fundo, o plano de fundo e vou usar o URL. URL e dentro dela, passo a imagem de fundo. Qual imagem de fundo é essa imagem de fundo? Essa longa imagem de fundo. Fundo do tipo Ham de três BG três para JPG. Então, precisamos posicionar esse plano de fundo. Posição de fundo, e eu quero posicioná-la de baixo, com a parte inferior iluminada. Vou configurar esse arquivo. Depois de configurar esse arquivo, vamos ao navegador. É assim que nosso plano de fundo se parece. Agora precisamos colocar a moto e o carro na posição correta Para isso, precisamos estilizar o carro. No começo, vou estilizar o carrinho. Vou usar o nome da classe. Então, no interior, o calibre diz , primeiro, vou definir a posição Posição, vou torná-la absoluta. Então eu vou definir a partir de agora, eu quero colocá-lo em 300 pixels. De baixo, quero colocá-lo em 250 pixels. E também, vou definir a largura desse carro. Aqui eu vou definir a largura desta imagem do carro, e eu vou dizer 500 pixels. Da mesma forma, vou posicionar a moto. Para isso, vou usar o nome da classe. Eu copio o nome da classe e adiciono ao arquivo CSS de estilo, e vou selecionar a imagem da moto Então, dentro do CalibrSSF, quero definir a posição da posição, que é a posição absoluta Aqui usamos a posição absoluta porque não vamos mover a imagem de um carro e uma moto É por isso que usamos a posição absoluta e , da esquerda e da esquerda, quero colocá-la em 1.100 pixels e, na parte inferior, 360 pixels Além disso, vou definir a largura dessa imagem. Largura, vou fazer com que seja de 250 pixels. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, ficou assim. Acho que preciso ajustar um pouco a imagem do carro. Vamos voltar ao código novamente e, de baixo para baixo, vou torná-lo 250, não 150. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador novamente, é assim que ele se parece. Agora, colocamos nosso carro e a moto na posição correta Agora precisamos executar a animação. Precisamos correr da volta inferior para o canto inferior direito. Quero dizer que precisamos mover esse plano de fundo da volta inferior para a posição inferior direita, e isso nos dará esse lindo efeito de animação. Deixe-me te mostrar como. Então, como você pode ver, aqui definimos a posição de fundo, elevação inferior. Em nossa animação, precisamos movê-la para o canto inferior direito. Vamos definir um quadro-chave. Então, nos quadros-chave vermelhos e o nome do quadro-chave é Driving Driving e, dentro da Classe, vou usar a Dentro do recesso cl, quero alterar apenas a posição de fundo Posição de fundo, e vamos começar da posição inicial, então vou usar o mesmo valor, no canto inferior esquerdo. Copie esse valor e eu vou colá-lo aqui. E então eu dupliquei essa linha e quero subir para, então vou usar dois Qard, e desta vez, quero subir para o canto inferior direito Canto inferior direito. Vou substituir essa pilha Depois de definir esse arquivo, precisamos chamar essa animação em nossa seleção. Em nosso plano de fundo, quero executar essa animação. Vou usar a propriedade de animação animation e nosso nome de animação é driving. Em seguida, precisamos fornecer a duração da animação , que é de dez segundos. Em seguida, precisamos fornecer a direção da animação, que é linear. E também precisamos fornecer o tempo de animação. Quantas vezes queremos executar essa animação e eu quero rodar essa animação por tempo infinito, então vou usar infinito. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, como você pode ver, ele executa minha animação. É assim que podemos executar qualquer animação de direção. Precisamos apenas mover o fundo e não precisamos mover nossos objetos, e não precisamos mover nossos objetos como carros, caso contrário, motocicletas Só precisa mover o fundo de outro lado para outro lado. Aqui, apenas movemos esse fundo para o lado esquerdo para o lado direito e isso nos dá esse lindo efeito de direção. Então, espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 7. Efeito de carregamento de rotação usando animação CSS: Olá, pessoal. Mais uma vez, estou de volta com uma nova animação CSS relacionada ao projeto. Hoje, neste projeto, vamos criar essa bela animação de carregamento usando o valor de rotação X e rotação Y em três ambientes D. Vamos ver como podemos criar essa animação. Como você pode ver, primeiro, ele gira a animação em YXS 180 graus, depois gira a animação XXS e YXS e Vamos ver como podemos construir. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Live Server e já crio um documento HTML chamado indexoTetml Com isso, eu já crio arquivo CSS estilizado e vinculo o arquivo CSS de estilo a este documento Primeiro, dentro da etiqueta corporal, vou pegar uma etiqueta profunda, bife, e vou atribuir uma classe e o nome da nossa classe é Lodi Em seguida, vou pular para o arquivo CSS de estilo e, primeiro, vou estilizar a seção do corpo. Corpo, então dentro do CalibraSF eu vou atribuir a Altura, vou atribuir 100 janelas de visualização para altura e depois vou usar a propriedade, dessa forma flexionar Dessa forma, vou usar uma propriedade chamada justify content, Justify content center porque quero colocar o centro de alinhamento Em seguida, vou usar o centro de alinhamento e alinhamento de itens. Depois disso, vou usar a cor do plano de fundo, a cor do plano de fundo. Eu quero usar fundo cinza escuro. Então eu uso esse código de cores, tem a faixa 222, e vou definir esse arquivo, definir esse arquivo, é assim que ele se parecia Agora, vamos direcionar o elemento usando seu nome de classe. Então digite dot loading. Carregando dentro do Calibra diz que, aqui, vou usar a propriedade, a propriedade chamada Wi Wi 100 pixels Em seguida, vou usar a propriedade de altura, altura também de 100 pixels e cor de fundo, cor de fundo, e vou usar a cor branca Daground Depois disso, vou atribuir um pequeno raio de borda. Raio da borda, quero um raio de borda de 12 pixels de cada canto Agora, ao acessar esse arquivo, você pode ver o resultado. raio de borda QuillPixel fornece bela Agora, vamos trabalhar no quadro-chave da animação. É na taxa de quadros-chave. E o nome da nossa animação é, por exemplo, carregamento. Então, dentro desse quadro-chave, vou adicionar o primeiro estágio 0% na posição 0% em 0% do tempo, dentro da resina fria Aqui eu vou usar a propriedade transform, and transform rotate X zero DG Então, gire Y, gire, Y. Além disso, eu vou passar Ele iniciará a animação a partir de sua posição original. Em seguida, vou pular para o segundo estágio da animação, então dupliquei essa linha e, em 50% do tempo, quero girar essa animação em Xs em zero grau, mas quero girar essa animação, YxS 180 Com 50% da duração da animação, ele girará esse elemento em 180 graus YxS Então, na fase final, com 100% da animação, deixe-me mostrar em 100% da duração, quero girar esse elemento em XX em 180 graus Além disso, quero girar o mesmo elemento em YX em 180 graus Vou configurar esse arquivo. Então eu vou chamar essa animação na minha seleção. Vou digitar animação. Primeiro, vou fornecer o nome da animação que está sendo carregada. Em seguida, fornecerei a duração da animação, que é de segundo para a. Em seguida, precisamos fornecer a função de temporização da animação , que é linear. Finalmente, precisamos passar a contagem de iterações da animação. Quero rodar essa animação por um tempo infinito. Eu vou passar infinitamente. Como você pode notar, aqui trabalhamos com o valor de rotação x e o valor de rotação de Y, essas duas funções funcionam em três ambientes É por isso que precisamos usar a perspectiva sobre isso para entendê-lo melhor. Vou pular para a seção corporal e aqui vou adicionar uma perspectiva. perspectiva, e eu vou dizer prospectiva de 200 pixels Agora, depois de definir esse arquivo e recarregar meu navegador, é assim que nossa animação se parece É assim que ele gira o elemento. Primeiro, ele vai girar o elemento em YXS 180 graus, depois vai girar o elemento, XX é 180 graus, também YXS 180 graus também YXS É por isso que ele cria esse lindo efeito de carregamento. Espero que agora esteja claro para você como podemos construí-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 8. Botão animado com animação CSS: Olá, pessoal. Neste tutorial, vamos criar esse vazamento, esse vazamento animado Agora, se você der uma olhada, temos um fundo vermelho e ele tem uma largura específica e distorcemos um pouco esse elemento. Também está se movendo da esquerda para a direita continuamente. Tempo infinito, ele executará a animação. Mas sempre que eu passar o cursor sobre esse elemento, deixe-me mostrar se eu passar o cursor sobre esse elemento, agora você pode vê-lo parar a animação Além disso, o botão é preenchido com esse fundo vermelho. Eu estendo a largura desse elemento inclinado e cubro todo o botão É isso que vamos criar neste projeto. Espero que você goste. É um projeto muito simples e fácil. Não é muito difícil. Então, vamos entrar no editor de código do User Studio. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server e já crio um documento HTML chamado index dot TML Com isso, eu crio o arquivo CSS Stylo. Por enquanto, está vazio. Agora, dentro da etiqueta corporal aqui, vou pegar uma etiqueta de ancoragem, A, e aqui, vou digitar Hover Aperte-o para configurar este arquivo, aqui você pode ver o link no meu navegador Mas precisamos estilizar esse link. Para isso, precisamos entrar nesse arquivo CSS de pontos de estilo. No início, vou começar a estilizar com body tag, algum tipo de corpo Lá dentro do Cli vers está a primeira propriedade em que vou usar a altura Vou definir uma altura e, para altura, vou amarrar 100 VH, colocar altura Então eu vou definir a tela e vou torná-la de linho Exiba flocos e justifique item no centro do conteúdo, alinhe alinhe Seja qual for o elemento que passarmos dentro dessa tag corporal, ele centralizará vertical e horizontalmente Depois disso, também vou passar uma cor de fundo, cor de fundo aqui vou usar a cor de fundo cinza Então, o tipo tem a tag 222, e eu vou definir esse arquivo Depois de definir esse arquivo, você verá o resultado. Como eu disse, horizontal e verticalmente, ele centralizará o elemento desta página nesta página Em seguida, vou estourar a etiqueta da âncora. Então digite A, então dentro do ClirasSF eu vou remover o sublinhado desse texto, algum tipo de texto, decoração Eu vou fazer disso uma freira. Vou configurar esse arquivo, você pode vê-lo remover o sublinhado Depois disso, vou torná-lo visível em algum momento, em cores. Vou fazer com que seja branco. Além disso, cabelo, vou definir o tamanho da fonte, o tamanho da fonte e vou torná-la de 40 pixels, acho que 40 pixels são suficientes para o exemplo. Em seguida, vou definir a família da fonte, a família da fonte. Aqui eu vou usar o sensorial. Depois disso, vou definir fronteira, fronteira. Quero três pixels, borda sólida, sólida, e nossa cor de borda também é branca. Então eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso botão se parece. Depois disso, precisamos adicionar um pouco de preenchimento. Então, esse preenchimento, de cima para baixo, eu vou passar 40 pixels e da esquerda e direita, eu vou passar 80 pixels Então eu vou me posicionar. Posição, vou torná-la relativa. Depois disso, vou definir estouro. Transbordamento oculto. Vou configurar esse arquivo. Depois de configurar esse arquivo, é assim que nosso botão se parece. Em seguida, vou criar o elemento interno usando a pseudoclasse before. Aqui, vou criar uma pseudoclasse anterior da tag âncora A, dois pontos Então, dentro dos aliases, a primeira propriedade, vou usar o conteúdo para criar um conteúdo em branco para isso Conteúdo, conteúdo é um conteúdo em branco. Depois disso, precisamos definir a posição desse conteúdo em branco. Então, do topo, da posição superior, vou fazer com que seja zero. Do laboratório também vou começar a dormir com zero. Depois disso, vou definir uma cor de fundo, cor de fundo. Vou usar a cor avermelhada someti haTAGF quatro, quatro, três, três, seis Depois disso, vou definir id. Largura, leme para usar a largura, 120 pixels Em seguida, vou definir altura, altura e bainha para usar altura, 100%, 100%. Depois disso, vou definir a posição da posição e quero torná-la absoluta. E eu vou configurar esse arquivo. Depois de definir esse arquivo, é assim que nosso elemento se parece. Mas o problema são as letras embaixo dela. Então, para isso, precisamos usar o valor do índice Z. Então, aqui está o índice T Z, e eu vou passar menos um Vou configurar esse arquivo e resolver o problema. Agora vou transformar esse elemento. Eu quero distorcer esse elemento. Para isso, precisamos usar a propriedade transform, transform, e eu vou usar o valor de distorção, distorção E eu quero incliná-lo até -15 graus no EG, e eu não quero configurar esse arquivo Depois de definir esse arquivo, é assim que nosso elemento ficará. Além disso, você pode notar que esse elemento não está visível fora da área da borda porque aqui usamos a propriedade oculta de transbordamento É por isso que não podemos ver essa parte da área desse elemento que. Agora precisamos trabalhar na animação que moverá esse elemento para o lado direito. Mas antes de começar a animação, vou comentar esse estouro de linha oculto e aqui, vou declarar a animação usando o quadro-chave vermelho e o nome da nossa animação é, você pode nomeá-la de qualquer coisa, vou chamá-la de mover Então, dentro do que Caira diz aqui, eu vou usar a palavra-chave from, a partir desta é a posição inicial desta animação Em seguida, o calibre diz, aqui, eu vou usar a propriedade chamada P. A partir da volta, eu quero começar a animação com menos 120 pixels Desculpe, 120, não 12. Então eu vou configurar esse arquivo. Quero dizer, ele vai colocar esse elemento naquele lugar. Deixe-me te mostrar. Se eu alterar o valor, se eu alterar o valor esquerdo, se eu fizer com menos 120 pixels e, em seguida, definir esse arquivo Como você pode ver, movemos esse elemento nessa posição. Agora, em nossa animação, vamos começar esse elemento a partir dessa posição. Por enquanto, vou torná-lo zero, zero novamente porque essa é a posição inicial desse elemento. Mas na animação, vamos começar esse elemento nessa posição. E na segunda palavra-chave, nosso destino final é o valor esquerdo f aqui, eu vou passar 100%. Vou configurar esse arquivo. Além disso, agora, vou descomentar essa linha novamente. Vou configurar esse arquivo novamente. Depois disso, vou chamar essa animação em nosso BFCEDelimate Dica de animação, primeiro precisamos fornecer o nome da animação que é move, depois precisamos fornecer a duração da animação e vou usar 1,2 segundo. E nossa derivação de animação é linear. Para contagem de interconexões de animação, aqui vou usar valor infinito, infinito Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, tempo infinito por tempo infinito, ele moveu esse elemento para trás dessa parte inferior. Por um tempo infinito, ele executará a animação, mas eu quero parar essa animação quando eu colocar meu cursor neste botão. Além disso, quero estender a largura desse elemento de inclinação. Para isso, precisamos criar um seletor de foco desse elemento anterior Aqui, vou digitar o ponteiro de dois pontos NCatag e vou aplicar o seletor Her no elemento anterior . Então, dentro da propriedade calibrSF, vou usar wed Quero estender a largura desse elemento e quero torná-lo 100%. Em seguida, vou remover o QVLu. Eu quero fazer disso um quadrado. Vou digitar transform e quero torná-la Qvalu zero DG e também vou remover a animação ao passar o cursor sobre esse elemento Então digite animação, e aqui eu vou passar Nn Value. Vou definir esse arquivo após definir esse arquivo Se eu passar o cursor sobre esse botão, como você pode ver, ele interrompe instantaneamente essa animação Também preenche o botão com esse pseudo-elemento anterior. Mas o problema é que não podemos experimentar a transição nela. Ele cobriu instantaneamente todo o botão. Para isso, aqui precisamos usar uma propriedade chamada transição. Faça a transição de todo esse elemento e nosso tempo de transição será de 0,5 segundo. Win hub em segundo lugar, ele vai encobrir esse elemento. Deixe-me te mostrar. Sempre que eu passo meu coração sobre esse botão, você pode experimentar essa animação Você pode experimentar essa transição. É assim que podemos criar esse belo efeito de animação neste botão com a ajuda de quadros-chave e antes do pseudo Então, obrigado por assistir a esta programação de vídeos para nosso próximo projeto.