banner cibersistemas

Categories: Tecnologia

Exemplos de transição CSS – como usar animação flutuante, alterar opacidade e muito mais


Se você está trabalhando com tecnologias da web como CSS, HTML e JavaScript, é importante ter algum conhecimento básico sobre animações e transições CSS.

Neste artigo, aprenderemos como fazer algumas animações básicas de transição usando CSS.

Como animar um elemento com transição básica ao passar o mouse

Neste exemplo, faremos a opacidade de um elemento mudar quando um usuário passar ou passar o mouse sobre o elemento.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
    }
    .elem:hover {
      opacity: 0.5;
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>

Esta é uma transição simples que pode ser acionada quando passamos o mouse sobre o elemento. Podemos adicionar mais de uma transição que será executada ao mesmo tempo.

Vamos adicionar uma propriedade de transformação de escala para adicionar uma transição de escala ao elemento.

 .elem:hover {
      transform: scale(1.1);
    }

Mas a transição não parece ser suave, porque não definimos a duração da transição ou usamos qualquer função de tempo.

Se adicionarmos o transition , isso fará com que o elemento se mova com mais suavidade.

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }

Vamos analisar como funciona a propriedade de transição:

  transition: 500ms linear;

  • 500ms: a duração da transição em milissegundos
  • linear: a função de tempo

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Podemos adicionar mais opções como abaixo (exemplos do MDN):

#delay {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

Então, o que esse código está fazendo?

  • propriedade de transição: a propriedade que você deseja animar. Pode ser qualquer elemento CSS como background, height, translateY, translateX, e assim por diante.
  • duração da transição: a duração da transição
  • atraso de transição: o atraso antes do início da transição

Você pode aprender mais sobre os diferentes usos de transition em CSS aqui.

Como tornar as transições mais interativas usando a propriedade de animação e quadros-chave

Podemos fazer mais com as transições CSS para tornar esta animação mais criativa e interativa.

Como mover um elemento com quadros-chave

Vejamos um exemplo em que o elemento se move do ponto A ao ponto B. Estaremos usando translateX e translateY.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: orange;
      width: 300px;
      height: 150px;
      animation: moveToRight 2s ease-in-out;
      animation-delay: 1000ms;
    }

    @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>

E é isso que obtemos:

Desta vez, usamos novas propriedades como animação e quadros-chave. Usamos o animation para definir o nome e a duração da animação, e os quadros-chave permitem descrever como o elemento deve se mover.

  animation: moveToRight 2s ease-in-out;

Aqui eu chamei a animação moveToRight – mas você pode usar qualquer nome que quiser. A duração é 2s , e ease-in-out é uma função de tempo.

Existem outras funções de tempo que você pode usar, como ease-in, linear, ease-out o que basicamente torna a animação mais suave. Você pode aprender mais sobre o funções de tempo aqui.

@keyframes leva o nome da animação. Neste caso é moveToRight.

 @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }

keyframes irá executar a animação em etapas múltiplas. O exemplo acima usa uma porcentagem para representar o intervalo ou a ordem das transições. Também poderíamos usar o from e to métodos. como abaixo “

 @keyframes moveToRight {
     from {
        transform: translateX(0px);
      }
     to {
        transform: translateX(300px);
      }
    }

from representa o ponto de partida ou a primeira etapa da animação.

to é o ponto final ou a última etapa da animação a ser executada.

Você pode querer usar uma porcentagem em alguns casos. Por exemplo, digamos que você queira adicionar mais de duas transições que serão executadas em uma sequência, como a seguir:

 @keyframes moveToRight {
     0% {
        transform: translateX(0px);
      }
     50% {
        transform: translateX(150px);
      }
       100% {
        transform: translateX(300px);
      }
    }

Podemos ser mais criativos e animar muitas propriedades ao mesmo tempo, como no exemplo a seguir:

Você pode brincar com propriedades e técnicas de animação na caixa de areia aqui:

Eles são muito mais coisas que podemos fazer com os quadros-chave. Primeiro, vamos adicionar mais transições à nossa animação.

Como animar mais propriedades e incluí-las na transição

Desta vez, vamos animar o fundo e fazer o elemento se mover em um padrão quadrado. Faremos a animação funcionar para sempre usando o infinite propriedade como uma função de tempo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: orange;
      width: 250px;
      height: 250px;
      border-radius: 10px;
      animation: moveToLeft 5s linear infinite;
      animation-delay: 1000ms;
    }

    @keyframes moveToLeft {
      0% {
        transform: translateX(0px);
        background: linear-gradient(
          to right,
          #ff8177 0%,
          #ff867a 0%,
          #ff8c7f 21%,
          #f99185 52%,
          #cf556c 78%,
          #b12a5b 100%
        );
      }
      25% {
        transform: translateX(400px);
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
      50% {
        transform: translateY(200px) translateX(400px);
        background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
      }

      75% {
        transform: translateX(0px) translateY(200px);
        background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
      }
      100% {
        transform: translateY(0px);
      }
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>

Vamos decompô-lo. Primeiro nós adicionamos infinite para fazer a animação funcionar para sempre.

animation: moveToLeft 5s linear infinite;

E então dividimos a animação em quatro etapas. Em cada etapa, executaremos uma transição diferente e toda a animação será executada em uma sequência.

  • Primeira etapa: defina o elemento horizontalmente para translateX(0px)e altere o plano de fundo para gradiente.

 0% {
        transform: translateX(0px);
        background: linear-gradient(
          to right,
          #ff8177 0%,
          #ff867a 0%,
          #ff8c7f 21%,
          #f99185 52%,
          #cf556c 78%,
          #b12a5b 100%
        );
      }

  • A segunda animação moverá o elemento da esquerda para a direita e mudará a cor de fundo.

 25% {
        transform: translateX(400px);
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }

  • A terceira animação moverá o elemento para baixo usando translateY e mude a cor de fundo novamente.
  • Na quarta etapa, o elemento se moverá de volta para a esquerda e mudará a cor de fundo.
  • Na quinta animação, o elemento deve voltar ao seu lugar original.

Empacotando

Neste artigo, abordamos várias coisas que você pode fazer com as transições CSS. Você pode usar as transições CSS de várias maneiras em seus aplicativos para criar uma melhor experiência do usuário.

Depois de aprender o básico das animações CSS, você pode querer ir além e fazer coisas mais complexas que requerem interação do usuário. Para isso, você pode usar JavaScript ou qualquer biblioteca de animação de terceiros por aí.

Olá, meu nome é Said Hayani que criei subscribi.io para ajudar criadores, blogueiros e influenciadores a aumentar seu público por meio do boletim informativo.



Fonte

Click to rate this post!
[Total: 0 Average: 0]
Share
Published by
António César de Andrade

Recent Posts

Liga da Justiça de Zack Snyder adiciona outro personagem DC: Golpe de morte de Joe Manganiello está de volta – Relatório

Joe Manganiello está supostamente retornando como o assassino mortal Deathstroke para a versão HBO Max…

4 hours ago

Klee do Genshin Impact vale seu tempo e dinheiro?

O Genshin Impact, sem dúvida, teve um primeiro mês agitado de operação, com milhões de…

5 hours ago

Borat 2 Review: Uma sequência surpreendentemente engraçada e absurdamente oportuna

Assistir ao Borat original 14 anos após seu lançamento em 2006 mostra seus pontos fortes…

5 hours ago

Rick e Morty estão mais dentro do cronograma do que nunca, afirma o criador Dan Harmon

Inúmeros filmes e programas de televisão foram adiados, cancelados ou alterados de forma significativa como…

5 hours ago

Como jogar entre nós como um jogo de terror

Normalmente tento entrar no Between Us uma vez por semana para me conectar com meus…

5 hours ago

Muitos disfarces incríveis de Borat 2 classificados

Classificamos todos os disfarces do "cara americano de verdade" que Borat teve que usar em…

6 hours ago

This website uses cookies.