Animações CSS puras - Crie um botão legal, um modelo deslizante e uma página de produto! (Sem Javascript) | AJ Burt | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Animações CSS puras - Crie um botão legal, um modelo deslizante e uma página de produto! (Sem Javascript)

teacher avatar AJ Burt, Learning is Living Better

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

8 aulas (29 min)
    • 1. Exemplos rápidos para aprendizado rápido

      0:53
    • 2. Qual é sua necessidade para este curso

      1:06
    • 3. Botões, fundo e texto em animação

      6:00
    • 4. Abre menos espaço com efeitos de pânico de imagem

      6:07
    • 5. Modais animados com HTML/CSS puro

      3:59
    • 6. Codepen Copycat: Transformando com CSS

      8:50
    • 7. Veste suas animações com Bezier cúbico!

      1:59
    • 8. Próximos passos!

      0:23
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.061

Estudantes

6

Projetos

Sobre este curso

Animações da Web são uma maneira maravilhosa de direcionar a atenção de um usuário através de um site e melhorar sua experiência geral. Neste curso, vamos aprender a criar belas animações da Web usando o CS puro.

Conheça seu professor

Teacher Profile Image

AJ Burt

Learning is Living Better

Professor

Learning is my passion. I've always pursued learning outside of traditional academic settings. I've taught myself programming, graphic design, marketing, business planning, investing, cooking, ballroom dancing, yoga, animation, and so much more without a professional teacher and by paying next to nothing. I've used this to turn my degree in anthropology to a career in business and marketing, and it's been so rewarding yet easy to do that I realized I simply had to share it with others. That's why I signed up to teach on Skillshare.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Exemplos rápidos para aprendizado rápido: Oi, todo mundo. Hoje vamos aprender sobre animação na Web. Animação é realmente útil em tantos contextos diferentes. O olho humano está ligado para rastrear o movimento. Então, especialmente quando estamos integrando isso em um projeto da Web, ele realmente nos ajuda a controlar e direcionar a atenção dos usuários para certas partes de nossa página da Web. Sem mencionar que há algo realmente divertido e legal sobre mover o mouse para o dedo em torno de uma página da Web e vê-lo responder às suas ações. Hoje, vamos aprender algumas ferramentas de animação da Web que você pode aplicar em uma ampla gama de contextos. Vamos aprender a fazer botões, efeitos de pairar, imagem dos efeitos dela. Vamos aprender a implantar alguma funcionalidade móvel legal. E então nós vamos até aprender a copiar um recurso legal do 10. Se você sabe CSS, mas nunca realmente usá-lo para animar uma página da Web que vai ser perfeito para você. Eu projetei este tribunal para apresentá-lo a muitos conceitos em um curto espaço de tempo possível , então vamos começar 2. Qual é sua necessidade para este curso: O projeto da classe vai ser muito simples. Tudo o que você precisa fazer é pegar um dos exemplos deste curso e de alguma forma expandir sobre ele . Você pode mexer com o CSS, adiciona alguns novos elementos ao HTML e fazer o que quiser para torná-lo legal. Todos os meses vou escolher um projeto de classe que se submeteu, e vou colocá-lo na minha página do Twitter. Vamos falar bem rápido sobre o que você vai precisar para este curso. Na verdade, vamos usar caneta de código, então não há necessidade de baixar ou instalar nada. Eu recomendo que você tenha um navegador da Web moderno atualizado. Não importa qual deles é, desde que você tenha instalado a atualização mais recente. Porque neste curso vamos acelerar um pouco as coisas por não nos preocuparmos em escrever em código para prefixos de fornecedores. Eu ainda vou te mostrar onde encontrá-los, mas vamos manter as coisas bem simples e atualizadas. Os navegadores modernos da Web não precisam mais dos prefixos do fornecedor que estaríamos usando neste tutorial, então apenas certifique-se de que você tem a versão mais atualizada do seu navegador. Finalmente, como você vai junto, não se esqueça de copiar que poderia pocilhos para cada exemplo e colar em seu projeto de classe , porque nós estaremos voltando para alguns deles mais tarde no curso. Se o seu navegador está atualizado, qualquer pronto para começar a animar algumas páginas, vamos começar. 3. Botões, fundo e texto em animação: Tudo bem, vamos mergulhar e começar a animar esta página da Web. Como você pode ver, é uma página web super simples. Apenas um pouco chamado de ação com este botão. Neste momento , não faz nada. Então vamos vesti-lo um pouco. Hum, nós vamos em frente e saltar para o código pessoas. E a primeira coisa que você vai fazer é fazer uma cópia disso para que você possa salvar suas alterações. Volte para ele se quiser fazer referência mais tarde. Então, onde é que obter Click fork aqui em cima? , Na verdade,não precisamos nos inscrever, então digamos que salva anônimo. Se você tem uma conta, você pode fazer login e ou se você quiser carimbar, você definitivamente pode. Mas você não precisa. Desculpe por fazer isso. E agora, só para que possamos voltar a esta página mais tarde, vamos subir aqui e copiar o URL. Vamos começar um projeto. Coloque o seu título. Vamos apenas dizer o exemplo um e paz para ali mesmo. Tudo bem, então agora que fizemos isso, vamos falar sobre como queremos animar isso. Acho que seria muito legal se este botão mudasse para uma cor diferente quando a tivermos sobre ele. Acho que seria muito legal se este botão mudasse para uma cor diferente quando a tivermos sobre Tudo bem, então lá vamos nós podemos ver que o efeito mais pesado agora é aplicado quando temos um coelho. Então, como vamos realmente animar isso para que não pule direto para a outra cor? Queríamos desvanecer-se a esse azul. Então, se você arrastar sobre o trabalho de um painel de script, você verá que eu passei por este link para vocês. Vamos abrir isso agora sobre links. Vamos nos levar ao site W3 Escolas Dot com. É um dedo de referência super útil. Qualquer um dos seus CSS html JavaScript etcetera precisa aqui. Estamos apenas olhando para a propriedade de transição. E antes que fales demasiado sobre isto,só quero fazer uma nota rápida. E antes que fales demasiado sobre isto, Neste curso, não vamos usar prefixos de fornecedores como Web get mas. Hum, mas tome nota disso. Se você quiser suportar versões mais antigas desses navegadores, então você definitivamente vai querer incluí-los quando você está implementando isso em seus próprios sites. Então apenas tenha isso em mente Vamos ver isso nos impostos agora. Então temos essa transição e vemos que podemos passar em uma federação de propriedades, uma função de aperto, um atraso e, claro, herdar inicial. Então, em termos de animação da cor de fundo, eu acho que por agora vamos ficar com a propriedade em duração e podemos falar sobre alguns dos outros usos mais tarde. Certo, então vamos voltar e adicionar a propriedade de transição ao nosso botão. E nós realmente temos que adicionar isso para a classe botão e não para o botão. Tenha a aula dela porque você não pode passar nessa propriedade de transição ao mesmo tempo, você está modificando o efeito real que deseja fazer. Então, vamos em frente e definir a transição para a propriedade da cor de fundo. E vamos fazer um segundo. Podemos tê-la sobre isso agora, e vemos que agora está fazendo uma mudança gradual do branco para o azul. Vamos torná-lo um pouco mais rápido. Mude-o para apontar para, e agora é um efeito muito mais rápido. Então nós também esta função de tempo, e basicamente você pode passar em um monte de coisas diferentes para isso. Vamos rolar para baixo e você pode ver que temos um monte de coisas como Facilidade, facilidade de entrada, facilidade de saída Agora, vamos apenas ficar com facilidade. E se diminuirmos de novo, você notará que não é apenas uma transição suave. Agora ele realmente acelera no meio e diminui no início e no final um pouco. Então vamos mudar isso de volta. E agora que você tem isso implementado, eu estou percebendo que uma coisa que parece meio estranha é que a cor da fonte não está mudando. Então, isso é bom. Ou ter sua classe e adicionar apenas aquela cor de peso que parece muito melhor. Mas uma coisa que você vai notar, especialmente se nós diminuirmos a velocidade, é que o texto está realmente apenas estalando imediatamente. Não está animando como o resto do botão, então uma coisa que podemos fazer é passar um novo valor para esta propriedade. Podemos dizer cor. Vamos mantê-lo em dois segundos. Facilidade mudou isso de volta para 0.2 e você pode ver que ambos estão se animando juntos. Mas este é um monte de revestimento repetido, e obviamente não queremos fazer isso mais do que nunca. Então vamos olhar para algumas outras maneiras. Você pode fazer isso. Você pode realmente passar, oh, oh, como uma propriedade, e que tem como alvo todas as propriedades animadas possíveis que um elemento pode ter e anima-as. E assim você vê que agora ele ainda está funcionando. Ambos estão animando ao mesmo tempo. Finalmente, vamos falar sobre o último valor pode passá-lo para a transição, e esse é o atraso. Então vamos sentar um atraso de 0,2 segundos. E agora vamos ver que quando passarmos o mouse sobre esse botão, ele realmente escolhe um segundo antes da animação chutar. Veremos nos próximos exemplos como isso pode ser realmente útil, e é isso. Acabou com o primeiro exemplo. Você pode continuar mexendo com este código um pouco se você quiser, ou você pode mergulhar direito na próxima lição. 4. Abre menos espaço com efeitos de pânico de imagem: Tudo bem. Então, para um segundo exemplo, você pode ver que temos esta página de produtos e cada produto tem uma imagem. E então um pouco de descrição e um botão de compra. E basicamente, se tivéssemos um monte de produtos nesta página, isso começaria a ocupar muito espaço. Então, queremos condensá-lo para que só vejamos as imagens no início. E então quando a temos sobre as imagens, nós realmente conseguimos ver as descrições e isso por botão. Então vamos olhar para como podemos fazer isso, embora de alguma forma nós vamos precisar conter a descrição dentro desta imagem e você pode ver o no HTML nós realmente tê-lo configurado para que a imagem do produto e a descrição do parque dentro desta aula de polegar. Então, primeiro, vamos em frente e vamos definir a classe polegar para ter uma altura de 250 pixels, e vamos definir a gripe sobre como oculta. Você pode ver agora que nós não podemos ver essa descrição, está escondida abaixo do corte, então de alguma forma nós vamos precisar fazer isso para que quando a tivermos sobre uma dessas imagens , essa descrição aparece e paira sobre a imagem real. Então, vamos precisar fazer algum posicionamento para a imagem do produto tiva na descrição do produto. E para ser capaz de fazer isso, nós realmente vamos querer definir a posição no polegar. Porque se estamos brincando com o posicionamento absoluto sobre os, as classes infantis estavam realmente recebendo ish das pessoas, inning eles em relação a todo o documento, em vez de para isso algum dia. Se assim for, vamos evitar isso definindo a posição aqui como relativa. Então sabemos que vamos fazer algum posicionamento tanto na imagem do produto quanto na descrição do produto . Então, em vez de adicionar esse atributo absoluto de posição para ambas as classes, vamos adicioná-los aos produtos. Então vamos dizer, Produto, ambos vão ter uma posição de absoluta. Também sabemos que vamos querer manter a nossa taxa de posição de imagem onde está. Então vamos definir a conversa 20 pixels. Mas também vamos precisar definir onde a descrição é a causa Neste momento, descrição está escondida atrás dessa imagem do produto com um topo de zero também. Então você queria realmente estar fora da página. Então, vamos dar-lhe um valor de 250 pixels. E como você provavelmente se lembrará, é logo abaixo de onde o polegar corta. Então, como é que vamos conseguir? Então, quando passamos o mouse sobre essas imagens se move para cima e então a descrição se move para cima para tomar seu lugar, Bem, você pode ter adivinhado que vamos usar algum pairar e vamos segmentar a imagem. Primeiro, vamos dizer imagem e vamos definir o topo para negativo 250 correções ALS. Então, agora que fizemos isso, vemos quando a pegamos, essas imagens estão sendo tiradas da tela. Mas as descrições não aparecem, então prepara-se para corrigir isso também. E nós vamos apenas definir os 20 melhores pixels agora as descrições realmente aparecendo quando nós temos ela. Então, isso é bom. Mas como vamos animar isso? Nós já sabemos sobre a propriedade de transição, mas vamos afundar muito rápido sobre onde queremos adicionar isso a Anna encontrando a imagem e a descrição, mas vai ser um pouco chato passar essa propriedade de transição para ambos vamos voltar para esta classe de produto onde você definiu a posição do dedo absoluto. E vamos adicionar em uma transição lá e a propriedade, estamos fazendo a transição como topo. Vamos definir para isso. Vamos dar-lhe um segundo e vamos definir a flexibilização para facilitar. E agora, quando temos sobre aqueles onde as coisas, ambos estão deslizando juntos. Mas isso ainda parece um pouco estranho. Eu queria realmente olhar como a descrição está deslizando para cima na frente da imagem do produto . Então, como poderíamos fazer isso? Bem, poderíamos usar diferentes propriedades de transição para fazer essa classe de descrição se mover mais rápido do que a imagem do produto. Mas isso não é muito eficiente para adicionar isso a dois seletores diferentes. Então, em vez disso, vamos direcionar a imagem, e vamos definir o valor de atraso de transição para 0,5 segundos, e agora vemos que eles estão sendo animados separadamente. Vamos acelerar um pouco as coisas. Para tornar isso um pouco mais limpo permite que a transição atrasada nomear um segundo e vamos definir a transição superior para 0,6 segundos, e agora é muito mais ágil, e você pode realmente dizer que esta descrição Div está aparecendo em frente dessa imagem. O Dave. Sinta-se livre para continuar mexendo com este código se quiser. Mas se você estiver pronto, vamos pular para o terceiro exemplo. 5. Modais animados com HTML/CSS puro: Tudo bem, vamos começar com o exemplo. Três. Isso parece um pouco familiar, não é? Se você tiver o botão dela, você poderá ver que é a mesma página que estávamos editando antes. Mas se olharmos para o HTML, há algumas coisas diferentes acontecendo aqui. Parece que há realmente um formulário na página em algum lugar. Vamos definir a visibilidade dois visível só para que você possa ver como vai ser. Podemos ver que teremos e-mail, endereço, nome, nome, de envio e botão de ACLU. Mas precisamos descobrir uma maneira de realmente fazer este formulário aparecer quando clicamos neste botão. Então, como você pode fazer isso? Primeiro, vamos definir este H ref para atingir a nossa def de metal. Se você já fez ligações de raiva antes, isso é praticamente a mesma coisa. Então nós fizemos isso ainda não fazendo nada, porque nós vamos precisar definir o formulário excessivamente visível quando ele é alvo. Como podemos fazer isso? Bem, acontece muito parecido com pairar. Você pode selecionar sobreposição de formulário quando ele é alvo, e eu ia fazer para que é definir a visibilidade muito visível, e agora nós clicamos no botão, nosso estrangeiro aparece, e quando você clica em fechar, ele vai longe. Então, agora que temos isso configurado, como podemos fazer isso um efeito de transição? Bem, vamos tentar configurá-lo como fizemos com os outros exemplos. Você pode ver que ele não está realmente fazendo essa transição, e a razão pela qual ele não está fazendo isso é porque se você pensar sobre isso, como poderíamos realmente fazer a transição de uma visibilidade de visível para uma visibilidade de oculto? Qual é o passo entre o CSS deles não sabe, então nós realmente precisamos dar algo para o inimigo. E se você sabe alguma coisa sobre CSS, você provavelmente vai pensar sobre a função A pass ity aqui. Então vamos dar a nossa capacidade de sobreposição de formulário padrão de zero. E vamos dar a nossa capacidade de sobreposição de forma direcionada de quê? E nenhuma mulher clica no botão. Vamos ver. Na verdade, desvanece-se muito legal, mas isso não é tudo o que queríamos fazer. Também queremos deslizar para baixo quando clicarmos nele. Então, como podemos fazer isso? Bem, primeiro, vamos precisar definir esta classe de formulário para relativo. Vamos dar-lhe uma posição de relativo e, digamos, seu estado inicial para ter um topo de 300 pixels negativos. Então, assim é totalmente até a tela. Agora, quando esse formulário é excessivamente direcionado, vamos querer mudar o topo do formulário e defini-lo para zero pixels. E então nós vamos apenas adicionar uma classe de transição para formar. Agora podemos te ver. Quando você clica nele, ele realmente desliza para baixo. Sim, senhor. Tudo bem. Então você completou o exemplo. Três. Sinta-se livre para mexer com o formulário um pouco mais. Não se esqueça de salvá-lo em seu projeto e vamos passar para o nosso exemplo final. 6. Codepen Copycat: Transformando com CSS: Tudo bem. Então, para o quarto exemplo, eu queria tentar implementar algo que eu realmente acho muito legal sobre Code Pin. Você notará que pode redimensionar essas caixas, e quando uma delas se torna muito pequena, o texto do cabeçalho aparece, na verdade fica menor e se move para o painel do site. Então aqui nós temos apenas uma página web realmente simples com algum tipo de texto, e nós queremos torná-lo para que este cabeçalho faça a mesma coisa que poderia Pen faz quando a altura do navegador começa a ser muito pequena. Então vamos pensar em como poderíamos fazer isso. Primeiro, vamos começar ajustando essa classe de título para o estado final onde você quer que ela esteja, e para fazer isso, na verdade, usaria uma nova propriedade chamada Transform. Se você nunca usou transformação antes, é realmente uma propriedade muito útil que é extremamente útil sempre que você está trabalhando com animações. , Tenha em mente os prefixos do fornecedor, é claro, é claro, quando você está implementando em suas próprias páginas da Web. Mas novamente para esta classe, eu estou assumindo que você tem o navegador mais atualizado possível, qualquer que você pode usar e transformar é suportado em todos os navegadores modernos atualizados sem prefixos de fornecedor. Então vamos entrar e começar a usá-lo. Há muitos valores possíveis diferentes que podemos passar. Há duas transformações em D, bem como três transformações em D, mas vamos mantê-lo bem simples para este exemplo. Então, primeiro, vamos entrar e selecionar estão indo, e vamos apenas começar a aplicar propriedades transformadas a ele. Então primeiro sabemos que queremos que ele gire para baixo cerca de 90 graus. Para fazer isso, podemos apenas dizer 90 o E G para graus, e você pode ver que ele já está atualizado na página sendo girada 90 graus. Mas algo estranho está acontecendo aqui. Você vai notar que ele está realmente girando no centro desta imagem onde, realmente, realmente, se nós queremos que ele esteja vindo para baixo para este bit lado aqui, nós realmente queremos que ele esteja girando desde o início do elemento. Então, como podemos fazer isso? Na verdade, há uma propriedade que podemos usar para definir a origem dessa transformação. Se você trabalhar tudo em programas como o comprador de fotos Illustrator, você provavelmente sabe do que eu estou falando quando eu digo definir o ponto de origem para uma transformação. Mas se não, seremos capazes de ver muito em breve aqui. Mas se não, Então vamos em frente e chamar essa propriedade de origem de transformação, e vamos colocá-la no centro porque queremos a altura centrada. Mas queremos que o aspecto horizontal seja deixado. E agora você pode ver que ele realmente o moveu para o painel lateral aqui porque onde ele estava fazendo a transição do centro, ele agora está fazendo a transição do ponto mais esquerdo. Então que picaretas parece um pouco fora de lugar lá, e também podemos ver que este top estão aqui ainda está mostrando todo o seu espaço. E parte de toda a razão para implementar isso é quando as alturas do navegador são muito pequenas. Queremos poupar espaço. Então vamos em frente e definir a altura do título um 20 pixels. E agora assim, espaços removidos. Tudo bem, então ainda não terminamos a transformação. Vamos em frente e passar em outro valor e habilidade para baixo aquele pouco de texto. Agora mesmo. Ele tem uma escala de um e permite apenas definir para uma escala de 0,5 e agora é muito menor. Então, finalmente, precisamos descobrir uma maneira de colocar esse texto centralizado aqui. Obviamente, poderíamos fazer isso com algum posicionamento. Mas há na verdade uma função construída em transformação chamada traduzir. E o que isso faz é mover em torno de um elemento por valores horizontais e verticais, muito parecido com a posição. Então vamos ligar, traduzir, e vamos passar. Vamos apenas dizer 20 pixels para começar, e se compará-los zero e 20 podemos ver que ele está apenas se movendo verticalmente. Por enquanto, também queremos movê-lo horizontalmente, então vamos adicionar 25 pixels negativos. Agora você pode ver que ele foi movido um pouco para cima, tudo bem, então agora o texto está centrado horizontalmente, mas nós ainda queremos que ele seja uma espécie de linha para esta caixa de texto aqui verticalmente. Vamos mudar isso para 60 tudo bem, então agora temos o cabeçalho definido para onde queremos que ele vá quando a altura do navegador é pequena o suficiente. Mas agora nós realmente precisamos adicionar de volta aos valores padrão. Então vamos fazer uma consulta de mídia, e vamos dizer que quando a tela for mais alta do que 400 pixels, vamos fazer algumas alterações em cada um. Então, já sabemos que basicamente vamos desfazer a transformação que fizemos anteriormente no documento. E então o que poderíamos fazer é ir em frente e copiar tudo isso e colá-lo aqui, definir a rotação para zero, definir a escala para trás do dedo do pé um e dizer que traduzir para zero. E quando a nossa tela é alta o suficiente, volta para onde começou. Ou para tornar as coisas um pouco mais simples, podemos simplesmente definir a transformação para seu valor padrão e a mesma coisa está acontecendo. Então também, notamos que quando a tela é alta o suficiente, essa altura ainda está faltando. Então vamos em frente e de volta e nós podemos realmente fazer a mesma coisa aqui e apenas a altura inicial. E agora estamos tendo isso entre esses dois estados. Então, agora que temos essa configuração, podemos fazer algo que provavelmente está se sentindo um pouco familiar para, você sabe, e adicionar uma transição para cada um. Então vamos fazer a transição de todas essas propriedades que estavam mudando. Vamos dar-lhe 0.38 segundos para fazer isso. Vamos deixar isso mais fácil. Agora. Estamos vendo algumas das mesmas funcionalidades que poderia fixar tem. Eu realmente quero fazer parecer que quando isso está mudando que caixas de texto realmente deslizando para cima. Então, para fazer isso, vamos brincar com o preenchimento em torno deste grupo de formulários aqui. Então vamos pegar isso fora do código de não fazer isso e soltá-lo antes de uma consulta de mídia. E o que eu quero fazer é quando as coisas caíram assim. Eu quero que nós que o preenchimento superior para zero e deixar o 20 pixel tapting na parte inferior no lado para que é bom para o quadrado assim. Mas quando se expande que o carinho para trás, é agora. Estamos a ter aquele espaço agradável quando o temos, e quando não temos, está a desabar. Vamos adicionar uma transição para que pareça que as caixas de texto deslizam para cima. Então nós vamos apenas dizer transição Patty, Vamos pegar 1/2 segundo e disse que facilidade. E agora vai parecer que aquela caixa está escorregando! Baseado no texto em movimento. Lá vai você, você completou Exemplo para em. Esse é o fim dos exemplos oficiais. Mas se quiser brincar com isso um pouco mais, vamos falar um pouco sobre essa facilidade para a qual estamos definindo todas as suas transições. E algumas maneiras que podemos realmente brincar com isso para obter alguns efeitos realmente ávidos. Então, se você está interessado na cabeça para a próxima seção, hum, hum, mas se não, sinta-se livre para pular em frente para a conclusão. 7. Veste suas animações com Bezier cúbico!: Tudo bem, vamos voltar ao nosso terceiro exemplo e falar um pouco sobre esse valor de facilidade que estamos passando para a transição. Basicamente, se você já usou um programa como Aftereffects antes, você provavelmente reconhece um ocupado uma curva e transição. Tem essa capacidade para alguém que estamos definindo facilidade foram realmente especificando um dos poucos predeterminados freios A ocupado em CSS. E isso é fácil aqui. Eu tenho facilidade e apenas uma transição linear regular configurado. Vejamos como se comparam a dois segundos. Como você pode ver, ambos levam dois segundos para chegar ao ponto final. Mas com a facilidade, está acelerando no meio e diminuindo no final. Então, na verdade, em alguns aspectos, parece que está se movendo mais rápido. Agora nós podemos fazer um monte de coisas realmente legais com isso e apenas realmente brincar com ele para que possamos definir alguns valores loucos como este onde ele está realmente sobre filmar sua transição um pouco. Podemos fazê-lo parar no meio, mas para o nosso exemplo do meio, na verdade só queria ultrapassar-se um pouco no final. Então vamos ver como isso pode parecer. Sim, acho que vai ser muito bom. Então agora nós podemos realmente apenas copiar este texto inteiro saltar de volta para o nosso exemplo, e vamos apenas substituir a animação formulário por aquele mais ocupado cúbico. E agora, quando nós clicamos, você pode ver que na verdade é sobre atirar em si mesmo um pouco legal. Há um monte de coisas realmente legais que você pode fazer com cúbico mais movimentado, então eu definitivamente me sinto livre para brincar com eles. 8. Próximos passos!: e é isso. Você termina o curso no final deste mês, eu vou realmente estar lançando a segunda parte deste curso, que vai apresentá-lo a alguns novos conceitos legais como quadros-chave, animando gráficos vetoriais escaláveis e reutilizando animações em diferentes partes de sua página da Web e até mesmo em diferentes sites inteiramente. Então fique ligado para isso. Certifica-te de que me estás a seguir e vejo-te depois.