Animaciones CSS3 con transiciones y transformaciones | Kirsten Swanson | Skillshare
Menu
Pesquisar

Playback Speed


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

Animações em CSS3 com transições e transformações

teacher avatar Kirsten Swanson, A Curious & Creative Frontend Developer

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

    • 1.

      Introduction

      1:47

    • 2.

      Project Overview

      1:05

    • 3.

      CSS Animations Overview

      1:24

    • 4.

      Transitions Description

      0:50

    • 5.

      Transition Properties

      1:55

    • 6.

      Transforms Description

      1:06

    • 7.

      CSS Selector & Property Review

      1:19

    • 8.

      Transition Examples

      3:10

    • 9.

      Adding Vendor Prefixes for Older Browsers

      0:37

    • 10.

      Transform Rotate Example

      1:18

    • 11.

      Transform Skew Example

      1:24

    • 12.

      Transform Scale Example

      1:16

    • 13.

      Transform Translate Example

      3:54

    • 14.

      Combining Multiple Transforms

      0:40

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

574

Students

2

Projects

Sobre este curso

Neste curso, você vai aprender sobre animações CSS3 com transições e transformações. Seu projeto será criar uma colagem interativa de ícones animados. Os ícones serão posicionados absolutos em um plano de fundo e terá animações aplicadas. Vamos ao curso neste curso, você deve conhecer os conceitos básicos as propriedades e seletores.

Este é um ótimo curso se você estiver procurando para adicionar alguns momentos deliciosos à sua UI.

Recursos de apresentação

Posso usar, folha de de de chocolate de bezer, propriedades de animação de MDN

Exemplos de codepen:

Exemplos de transição, transforme o seu exemplo, de transformação em um sear de

Exemplo de imagens animadas:

Repositório de GitHub e exemplo ao vivo

Meet Your Teacher

Teacher Profile Image

Kirsten Swanson

A Curious & Creative Frontend Developer

Teacher

Hello world, my name is Kirsten. I'm a Front-End Developer with a keen eye for design and an adventurous spirit. I'm continuously learning and teaching others along the way. 

See full profile

Level: Intermediate

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas 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. Introdução: Oi, todo mundo. Sou Kirsten Swanson. Atualmente sou um desenvolvedor da Fernand. Traga pasta. E eu estou realmente animado para estar aqui ainda compartilhar para ensinar sobre animações CSS. Primeiro, deixe-me lhe dar uma introdução sobre mim. Comecei a fazer marketing e na minha graduação e logo depois que terminei, queria explorar o mundo e viajar. Então acabei ensinando inglês na Coreia do Sul por dois anos. Quando voltei para os Estados Unidos, eu era um técnico de engenharia no poço, ele perguntou indústria Com a queda do petróleo um preço em cerca de 2015 eu decidi explorar novos caminhos de carreira. Eu só queria algo que fosse mais desafiador e criativo. E foi na verdade quando eu estava caminhando com uma amiga e ela me contou sobre programar acampamentos de botas . No começo eu estava realmente hesitante, e eu só preciso ajustar a água. Então eu acabei fazendo alguns cursos grátis online, e acabei me apaixonando pelo Cody, especialmente CSS. Então isso me fez rolar em um campo de programação chamado Torreon School of Software and Design e não aconteceu para o Colorado. Eu me matriculei na frente e pervertido que se concentrou em design e interface de usuário Em 2017 eu me formei. E tenho que ser honesto, essa foi a melhor decisão que tomei ao mudar o Curb Pass. Então agora estou animado para compartilhar meu conjunto de habilidades e paixão de CSS com vocês. Este curso vai ser sobre CSS três animações. Não inclui uma animação pesada com meu irmão e você nem sabe soltar roteiro. Mas você precisa saber o básico do CSS. Então vamos começar e nos divertir. 2. Visão geral do projeto: para o seu projeto de curso, você criará uma colagem interativa de ícones animados. Você escolherá seu próprio plano de fundo, bem como ícones, então, quando passar o mouse sobre os ícones, haverá algum tipo de animação. Um bom recurso é para trás. As próprias imagens estão em splash. Esta é uma grande galeria de fotos stock, bem como pixels e, em seguida, para ícones. Eu gosto de usar ícones planos tão bem quanto eu posso encontrá-la. Eu também vou estar incluindo um repositório no plano de aula, e isso irá incluir em cada um para mull pilha Você pode ver aqui. Este é o lugar onde você vai inserir suas imagens e, em seguida, também um elegante ela. E é aqui que você estará posicionando seus ícones. Posicionado absoluto. Estou ansioso para ver seus projetos concluídos no final deste curso. Ok, vamos começar e aprender sobre animações CSS. 3. Visão geral de animações em CSS: este curso é sobre CSS três animações com transições e transformações. Primeiro, eu vou dar a vocês uma ampla visão geral de CSS três animações, e então eu vou passar por transições e depois transformações. E finalmente, vamos fazer algum revestimento vital. Depois disso, seu projeto estará fazendo suas próprias inovações. Então, em primeiro lugar, CSS três inovações fornecem muito valor para suas interfaces. Eles podem fornecer feedback visual que eles fazem encantador. As microinterações nelas normalmente podem se tornar interações memoráveis para os usuários. CSS três animações irá alterar a aparência ou comportamento elemento forno quando seu estado muda, modo que isso pode ser em como um foco ou estado ativo. As animações devem ser simples em movimentos sutis. Eles devem ser animações consistentes, e eles devem melhorar a experiência do usuário e não distrair dela. Consulte também usos. Três animações são ótimas porque não precisam de script Java ou de uma biblioteca de animação. Aqui estão algumas tabelas de Posso usar o site em? Isso só mostra que CSS três transições e transformações são corretamente suportadas em vários navegadores 4. Descrição de transições: Então, primeiro eu vou passar por transições, e ele está fazendo elementos suavemente e gradualmente mudar ao longo de uma duração especificada. Então, se você não tem uma transição em um elemento quando ele é transformado, ele vai mudar abruptamente. Não será uma transição suave, então normalmente, quando você tiver uma transformação, você terá uma transição. Há quatro propriedades de transição. Eles são transição, transição propriedade, duração, tempo de transição e função em transição. Atrasar um suculento o primeiro para aqueles ar necessário para transições. Os outros dois são necessários. Para que uma transição funcione, você pode corrigir cada propriedade individualmente ou você pode usar a abreviação, e isso é recomendado para código mais rápido e mais limpo. 5. Propriedades de transição: Agora vamos falar sobre as propriedades de transição individuais, então o primeiro 1 que é necessário é a propriedade de transição, e o especifica a propriedade a ser transitada. Então, digamos, se você quiser a cor da borda ou a cor Baccarin, é aqui que você a especifica. Caso contrário, se você colocar o valor de todos, então você está alterando todas as suas propriedades que poderiam ser animadas. Aqui está na verdade uma lista de todas as propriedades diferentes que podem ser animadas, para que você possa ver que é uma lista bastante grande. Em seguida é uma duração de transição, e um especifica o intervalo de tempo da transição, e este valor é escrito em segundos. A função de temporização de transição especifica a velocidade da transição ao longo da duração. Por padrão, ele é definido à vontade. As outras opções incluem facilidade linear na facilidade para fora. Ele está em cúbico mais movimentado e mais movimentado permite que você defina sua própria curva de tempo. Então vamos olhar para esta folha de truques para mostrar a você tipo de como isso se parece. Então, aqui mesmo estes ar cúbicos diferentes faz orelhas. Você pode ver que o tempo de transição é diferente. Se você quisesse obter o código real, então você poderia clicar nele e então nós todos os anos você pode ver que esta é a função de tempo real que você precisaria. Então isso seria como se ele estivesse dentro ou fora. O último é o atraso de transição, e isso especifica quando a transformação será iniciada por padrão. A transição começa assim que a mudança de estado no elemento é acionada. Então, digamos que se você passar o mouse sobre um elemento ao passar o mouse, ele será acionado imediatamente, mas você pode colocar um atraso nele, e ele seria acionado imediatamente. 6. Descrição de transformações,: agora vamos falar sobre transformações. Isto é quando um elemento se move ou muda e aparência. Os principais tipos de transforma nossa escala girar, inclinar e traduzir. Girar é quando um elemento gira no sentido horário ou anti-horário, e isso é especificado pelo número de graus. Inclinação é quando um elemento inclina com base nos valores fornecidos nos eixos X e Y. Isso também é especificado pelo número de graus. Escala é um elemento aumenta ou diminui, e isso é por um inteiro com base na altura e largura do elemento. Traduzir é quando um elemento se move para a direita, esquerda para cima ou para baixo, e isso é especificado por pixels. Você pode combinar várias transformações para que você possa ter um elemento que traduz e gira . Por último, origem de transformação é separada da propriedade transformada, mas pode ser usada em conjunto com ela para especificar o local. Origem da transformação 7. Revisão de CSS Selector e revisão de propriedade: antes de passar para o revestimento de vida. Vamos apenas rever seletores CSS e propriedades, para que você tenha seu elemento. Pode ser a sua etiqueta P, a sua etiqueta de cabeçalho ou a sua div. Em seguida, você tem a sua propriedade, que vai ser a sua cor de fundo borda, e então você tem os valores especificados aqui. Então, quando estamos falando de transições e transformações, essas serão nossas propriedades. Então, aqui, em uma transição, você o especificará como sua propriedade. E então estes serão os valores para uma transformação. Você especificará. Aqui está a propriedade e, em seguida, os diferentes valores podem ser gira. Você traduz ou escala para poder ver visualmente o estado de uma mudança de elemento. Vamos usar a pseudo-classe hover, então vamos colocar isso no final do elemento. Então você tem o elemento de dois pontos do que pairar. Então você tem sua propriedade e, em seguida, seu valor. Então, por exemplo, há uma classe de link em. Se você tem ah, pairar pseudo classe sobre ele, ele vai ficar azul quando você pairar sobre ele. Agora vamos seguir em frente e realmente fazer algum revestimento de vida 8. Exemplos de transição: ok sobre o revestimento ao vivo. Estou usando lidar com isso aqui. É um editor online gratuito encontrado em seu navegador, então vamos primeiro falar sobre transições, será usar o quadrado e colocar animação nele. Então, primeiro, vamos adicionar a pseudo-classe pairar para que possamos ver quando o estado muda. Que tal fazermos a mudança de cor de fundo? Bem, diga para um roxo bonito, mas você pode ver quando você paira sobre ele. É uma mudança abrupta. Não é suave, então é aqui que a transição vem em mãos. Então vamos usar a abreviação da transição porque isso vai para esses códigos mais limpos e mais enxuto. E se você se lembrar corretamente, você vai primeiro colocar a propriedade quando você colocar federação, em seguida, a função de temporização e, por último, o atraso. Há uma ordem específica para isso, e você quer ter certeza de que você faz isso na ordem correta. Então vamos fazer uma transição para esta cor de fundo especificar na cor de fundo aqui porque é a propriedade que estamos mudando. E vamos dizer que queremos que isso leve cinco segundos. Vamos ver o que é Bacca que é agora uma transição suave. Não muda tão rápido. Após os segundos de luta, podemos colocar uma função de temporização. Vamos colocar as chaves, mano. Isso altera a aparência da transição. Por último, você pode colocar um atraso. Vamos colocar um segundo atraso, então quando você paira sobre o quadrado, ele não vai mudar de cor imediatamente. Viu como o roxo não aconteceu imediatamente? É porque leva um segundo de pairar sobre a praça antes de realmente mudar. Vamos adicionar outra propriedade a esta praça. Teremos uma fronteira, mas isso se torna uma borda roxa. Agora queremos mudar a fronteira no pairar também. Mude isto para verde. Então, como você pode ver, a borda não muda ao mesmo tempo que a imagem de fundo. Isso ocorre porque em nossa transição foram apenas especificando a cor de fundo. Então, já que estamos mudando a fronteira também, podemos dizer que tudo aqui e ambos devem mudar ao mesmo tempo. Agora 9. Como adicionar prefixos de Vendor para navegadores mais antigos: Há tantas propriedades diferentes que você pode mudar. Além de apenas a cor, como a lista que eu mostrei anteriormente Aqui, você pode mudar o com o preenchimento de margem alta tantas propriedades diferentes que você pode anime. Além disso, ao usar transições e transformações, você deseja se certificar de adicionar os prefixos do fornecedor como Web Kit, Mozilla Opera e Internet Explorer para transformações, e isso é para oferecer suporte a navegadores mais antigos. 10. Transformar o exemplo de rotação: Agora estamos nos movendo para transformações, que eu acho que é a parte mais divertida das animações porque você começa a mudar a aparência dos elementos e você começa a fazê-los se mover. Então primeiro eu vou girar, então vamos colocar uma transformação nos quadrados. Will Roque oitavo, hum, e o seis, o valor de graus. Que tal fazermos 50 graus? Então, quando passarmos o mouse, esses elementos girarão 50 graus e você vê, não é uma transição muito suave, então isso significa que precisamos colocar uma transição lá. Vamos dar um segundo. Você pode ver agora que o movimento é suave. Vamos dizer que queremos ir no sentido anti-horário vai colocar um negativo sobre este grau. E se quisermos fazê-los gastar muito rápido? Vamos colocar um diploma maior nisso. Isso é muito divertido. 11. Exemplo de Sk, a transformação: a transformação de inclinação é semelhante à transformação de rotação e que leva graus como o valor sq é quando um elemento é inclinado com base nos valores X ou Y fornecidos. Assim, os ovos inclinados, isso será distorcido com base no eixo X. Vamos colocar 10 graus. Se for um número positivo, vai dizer para a esquerda. Se for negativo, inclinar-se-á para a direita. Agora com isto. P: Por que isso vai ser inclinado no acesso Por quê. Então, se for um número positivo, ele vai inclinar para baixo. E se for negativo, vai ficar hostil. Se você apenas especificar inclinação, o elemento ficará inclinado com base no eixo X. Mas você também pode colocar nos Emirados Árabes Unidos que tudo o que você ouve é bem e ele vai distorcer Berks 25 graus no eixo X e, em seguida, 10 graus no eixo Y 12. Exemplo de escala de transformação: assim como a transformação de inclinação, a transformação de escala pode ser transformada nos eixos X e Y. Essa escala leva um valor de um número, então vamos colocar o número para ver o que acontece. Esse elemento recebe o dobro do tamanho do seu tamanho original, e você também pode ver que essa mudança não é muito suave. Então vamos em frente e adicionar uma transição. A CNN lhe dará a duração de um segundo. Como é muito suave. Ok, tal vamos encolher o elemento para colocarmos metade do tamanho dele. Que tal mudarmos a habilidade para o eixo X? E também podemos alterá-lo para o porquê ou a abreviação aqui podemos colocar em que o valor X no valor Y, e o elemento será alterado em ambos os eixos. 13. Exemplo de tradução de transformação: A última transformação que vou discutir é a transformação de tradução. Sinto que essa transformação é usada muito em você. Eu, por exemplo, no total, citando e ou algum feedback de confirmação aparecendo. Eu sinto que muitas vezes temos um monte de objetos elementos dedo do pé aparecendo no visor. A transformação de tradução move um objeto para cima ou para baixo no eixo Y ou para a direita ou para a esquerda no eixo X. Então vamos brincar com este círculo aqui. Vamos traduzir X, e o valor que entra aqui é em pixels. Então vamos colocar em 20 pixels, e isso vai fazer o elemento ir para a direita. Você pode ver que é um pouco nervoso, então vamos adicionar uma transição inibida duração dos segundos frades muito melhor e mais suave. Ok, então agora se conseguirmos essa queda seu negativo, o elemento vai para a esquerda. Agora, se traduzirmos por que o elemento está indo para cima e se é um número positivo, elemento irá para baixo. Você também pode usar a versão abreviada do Translate in. O elemento vai para a direita. 20 pixels em menos 30 pixels. Ok. Eu acho que este é um bom momento que podemos experimentar com todos esses círculos e nós também vamos jogar com a função de temporização. Podemos ver como o movimento do movimento desses círculos pode ser diferente quando você coloca uma função de temporização diferente. Então vamos mover todos esses círculos quando todo o contêiner estiver pairado. Então, que tal avançarmos no acesso exato em 300 pixels? Então todos os círculos vão mover 300 pixels? E como você pode ver, não é muito suave. Então vamos fazer transições para todos esses círculos. Ao adicionar esta transição, será mais suave como você pode ver, todos eles estão indo na mesma velocidade. Mas vamos colocar uma função de temporização bem. Experimente com os diferentes que temos. Vamos colocar, alimenta. Ele está ligado, deixa de fora, ele é e fora, você sabe quando você está vindo função. Então estes apenas tornam a velocidade das transições diferente. Então vamos ver o que isso faz. Agora. Você pode ver que esses círculos se movem em velocidades diferentes. Isso é por causa da função de temporização que acabamos de adicionar. Então traduzir é uma transformação muito poderosa, e eu sinto que podemos usá-lo muito em Are você I e realmente melhorou a experiência do usuário 14. Combine múltiplas formas: Não se esqueça, você pode combinar várias transformações juntas. Você vai escrevê-los em fila como esta sem um cínico em separá-los. Mas lembre-se de que você quer manter seu usuário final em mente e aprimorar sua experiência em vez de sobrecarregá-lo assim. Pire aqui. Bem, parabéns, Guias. Você termina o curso. Espero que sejas criativo com o teu projecto. E estou ansioso para ver o seu trabalho acabado. Esperemos que este curso sobre animações CSS tenha sido perspicaz e continuado. Poderemos adicionar momentos deliciosos para você. Agradeço mais uma vez por fazer o meu curso, e espero que tenha aprendido muito.