Como usar transições e transformações CSS3 para criar animações

Animações interessantes podem ser criadas com CSS3 usando transformações e transições. As transformações são usadas para fazer um elemento mudar de um estado para outro. Exemplos seriam elementos de rotação, movimento, inclinação e dimensionamento. Sem uma transição, um elemento sendo transformado mudaria abruptamente de um estado para outro. Para evitar isso, uma transição pode ser adicionada para que você possa controlar a alteração, tornando-a mais suave.

Como usar transformações CSS3

Existem alguns tipos de transformações comumente usadas. Vamos nos concentrar em exemplos 2D para este tutorial, mas é bom estar ciente de que coisas legais também podem ser feitas com transformações 3D. (Depois de dominar o 2D, o 3D será muito mais fácil!)

Nos exemplos a seguir, os retângulos originais estão em um verde mais escuro e os transformados são um pouco mais transparentes.

Traduzir

O método translate() move um elemento de sua posição atual para uma nova.
Com este código, o retângulo ajustado é movido 40 pixels para a direita e 100 pixels para baixo da posição atual.

 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

Girar

O método rotate() gira um elemento no sentido horário ou anti-horário pelo valor de grau especificado. Este código gira o retângulo no sentido horário em 40 graus.

-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

Escala

O método scale() aumenta ou diminui o tamanho de um elemento (de acordo com os parâmetros dados para largura e altura). Neste exemplo, o retângulo ajustado é duas vezes maior que sua largura original e três vezes maior que sua altura original.

 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

SkewX

Com skewX() , apenas o eixo x será afetado. Este retângulo é inclinado 30 graus ao longo do eixo x:

  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

SkewY

Esta é a mesma ideia, mas no eixo y. O método skewY() inclina um elemento ao longo do eixo y pelo ângulo definido. Este retângulo é inclinado 30 graus ao longo do eixo y.

-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

Inclinar

Se você quiser inclinar os eixos x e y, isso pode ser feito em um só lugar. O método skew() inclina um elemento ao longo dos eixos xey usando os ângulos especificados. O exemplo a seguir inclina o elemento retângulo 30 graus ao longo do eixo x e 20 graus ao longo do eixo x.

-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

Matriz

É aqui que as coisas ficam interessantes, mas também mais eficientes na situação certa. Se você estiver fazendo muitas transformações e não quiser escrevê-las individualmente, essas transformações 2D podem ser combinadas com o método matrix() .

Aqui está um esboço básico a seguir:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Apenas um aviso, é preciso alguma pesquisa para chegar aos valores na matriz. Aqui está um guia útil para começar.

Para fazer este exemplo, aqui estão os valores da matriz:

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

Como usar transições CSS3

Agora que as transformações foram abordadas, é importante observar que elas são frequentemente usadas com transições. Isso fará mais sentido nos exemplos de design a seguir.

É bom ter em mente que os valores podem ser personalizados para fazer a transição entre dois estados de um elemento exatamente como você gostaria. Pense nisso como uma maneira de controlar a velocidade da animação ao alterar as propriedades do CSS. Um exemplo que você provavelmente já encontrou é passar o mouse sobre um botão. É comum ver um “escurecimento lento” em vez de apenas uma cor mais escura instantânea quando você passa o mouse sobre ela. Este “escurecimento lento” foi criado com uma transição.

Se você estiver especificando muitos valores, a taquigrafia será útil. A propriedade CSS de transition é uma propriedade abreviada para propriedade de transition-property , transition-duration de transition-timing-function transition-delay .

Detalhes da transição

A transition-property especifica a propriedade CSS onde a transição será aplicada, pois você pode aplicar uma transição a uma propriedade individual. Exemplos de aplicação de uma transição a uma propriedade individual seriam em um plano de fundo ou uma transformação. Se você quiser segmentar todas as propriedades do site, a propriedade transform pode ser definida como all .

A transition-duration é útil para que as alterações em uma propriedade ocorram em um período de tempo especificado, em vez de imediatamente. Você verá segundos e milissegundos como os valores possíveis.

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

A propriedade CSS transition-timing-function permite estabelecer uma curva de aceleração, para que a velocidade da transição possa variar ao longo de sua duração. Há muitas opções para experimentar.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

O transition-delay é bastante autoexplicativo. Um valor especificado define o número de segundos ou milissegundos de espera antes do início do efeito de transição. Initial definirá a propriedade para seu valor padrão. Se inherit for especificado, isso significa que ele herda a propriedade de seu elemento pai.

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

Aqui está a configuração abreviada básica para uma transição:

div {
  transition: [property] [duration] [timing-function] [delay];
}

A sequência abreviada completa:

div {
  transition: background 1s linear 0.5s;
}

Planejamento de animação

Antes de criar animações realmente detalhadas, é bom dar um passo atrás antes de criar algo totalmente maluco (principalmente se for em público na web). Não há nada de errado em adicionar um toque divertido, mas é tentador animar demais. O movimento que você cria deve transmitir significado e melhorar a experiência do usuário, não distrair dele. Com isso dito, é hora de começar a criar!

Eu quero dizer que existem gifs animados neste tutorial para mostrar as animações. Os gifs estão repetidos, o que normalmente não seria feito para os designs. O propósito de tê-los em repetição é apenas para fins de demonstração.

Movendo uma imagem com a propriedade de transformação CSS

Antes de entrarmos em transformações e transições complicadas, vamos falar sobre coordenadas em uma grade de eixos. (Atenção: isso pode trazer de volta memórias de papel quadriculado do curso de matemática.) As coordenadas são usadas para mover a imagem.

Coordenadas X e Y

As coisas parecerão um pouco diferentes do que você pode esperar. O valor -y está acima do eixo x. HTML e CSS usam o que é chamado de “sistema de coordenadas cartesianas invertidas”, porque as páginas da Web começam no canto superior esquerdo e são lidas para baixo.

Animação um: Transformação básica com movimento horizontal

Nós tocamos brevemente na base em translate() e como ele pode mover um elemento. Quando colocado em prática, ele pode realmente flutuar seu barco, literalmente. Como aprendemos acima, o método translate() move um elemento de sua posição atual (de acordo com os parâmetros fornecidos para o eixo x e o eixo y).

O primeiro projeto será mover um gráfico submarino. Os submarinos precisam entrar no ar de vez em quando, então vamos estilizá-lo cuidadosamente com translate() .

Para movê-lo de sua posição inicial usando transform: translate(x,y) , dois novos valores terão que ser especificados. Para fazer o submarino se mover para a direita e para cima, o valor x deve ser positivo e o valor y deve ser negativo. Se o valor de y for definido como 0, ele se moverá apenas para a direita e não para cima.

Submarino subindo para o ar com transform()

Neste exemplo vamos mover o objeto 200px para a direita e 25px para cima. A sintaxe é transform: translate(200px,-25px); e o objeto se moverá no foco de .underwater . Ao criar os estilos para o movimento em .underwater:hover .move-right , a ação acontecerá ao passar o mouse.

Aqui está o HTML inicial:

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>

Veja isso no Codepen.

Realmente não é preciso muito CSS para fazer essa animação básica:

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

Como você pode ver, nossas coordenadas cairiam no quadrado superior direito. Ao pairar, o submarino se move para as novas coordenadas por causa da transformação.

As coisas parecem suaves por causa da transição. A transition-duration foi definida como 2sec , o que não é muito rápido para esta animação. A transition-timing-function foi definida como ease-in-out que lhe dá um início e fim mais lentos. Se o tempo de duração fosse aumentado para algo maior, isso seria muito aparente.

Animação básica dois: Movimento horizontal com quadros-chave e animação

Transform está sendo usado de forma um pouco diferente neste exemplo. Os quadros-chave e a propriedade de animação serão utilizados para criar a próxima animação.

Noções básicas de quadros-chave

Dentro @keyframes é onde você define os estilos e estágios para a animação. Aqui está o exemplo que usaremos, que ajudará a dar um efeito “fade in while movendo para baixo”:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

Os valores de transformação são incorporados aos quadros-chave. O posicionamento original é definido em 0% e, em 100%, a posição será reduzida em 30px.

Noções básicas de animação

Para usar a animação CSS3, você especifica quadros-chave para a animação.

Como usar consultas de recursos CSS

O mundo do web design está em constante mudança e é emocionante acompanhar as novas tendências de design em CSS. Se você é um dos primeiros a adotar CSS, você já pode estar ansioso para usar coisas como CSS Grid...

Como projetado acima, @keyframes mantém quais estilos o elemento terá em determinados momentos.

Sempre que você fizer isso, certifique-se de dar à animação um nome descritivo. Nesse caso, estamos usando fadeOut . Qualquer classe que inclua o fadeOut será aplicada. Nas etapas da animação, o “de” é definido como 0% e o “para” é definido como 100%. Este exemplo é bastante simples com apenas os dois estágios, mas certamente pode haver mais etapas adicionadas no meio.

Ações específicas com subpropriedades de animação

A propriedade animation é usada para chamar @keyframes dentro de um seletor CSS. As animações podem e geralmente terão mais de uma subpropriedade.

Os quadros-chave definem como será a animação; subpropriedades definem regras específicas para a animação. Tempo, duração e outros detalhes importantes de como a sequência de animação deve progredir estão todos incluídos nas subpropriedades.

Aqui estão alguns exemplos de subpropriedades de animação:

• Animation-name: Nome do @keyframesat-rule , que descreve os quadros-chave da animação. O nome fadeOut no exemplo anterior é um exemplo de animation-name .
• Animation-duration: Tempo que uma animação deve levar para completar um ciclo completo.
• Função de temporização da animação: Tempo da animação, especificamente como a animação transita pelos quadros-chave. Esta função tem a capacidade de estabelecer curvas de aceleração. Os exemplos são linear , ease , ease-in , ease-out , ease-in-out ou cubic-bezier .
• Animation-delay: Atraso entre o momento em que o elemento é carregado e o início da animação.
• Animation-iteration-count: Número de vezes que a animação deve se repetir. Quer que a animação continue para sempre? Você pode especificar infinite para repetir a animação indefinidamente.
• Direção da animação: determina se a animação deve ou não alternar a direção em cada execução da sequência ou redefinir para o ponto inicial e se repetir.
• Animation-fill-mode: Valores que são aplicados pela animação antes e depois de ser executada.
• Animation-play-state: Com esta opção, você pode pausar e retomar a sequência de animação. Os exemplos são none , forwards , para backwards ou both .

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

Aqui está como ficaria escrito em taquigrafia:

animation: 4s ease-in-out 1 paused fadeInDown;

Aqui está a estrutura HTML:

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

A classe de fadeInDown está fazendo o submarino e o conteúdo se moverem para cima e para baixo.

Tornando a animação mais suave ajustando os quadros-chave

Com mais alguns quadros-chave, podemos tornar a animação muito mais suave.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}

Veja isso no Codepen.

Ajustando o tempo da animação

Adicionar mais quadros-chave ajudou a suavizar a animação, mas podemos adicionar um pouco mais de interatividade com mais quadros-chave e um atraso de texto no div que contém todo o texto. É um efeito divertido ter o submarino refletindo no texto, então ter o atraso alinhado com o movimento do submarino permite isso.

O HTML terá as classes efetivas aplicadas:

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

E aqui está o CSS atualizado que permite a animação interativa:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Veja isso no Codepen.

Barra de progresso Cubic-bezier na animação CSS3

É hora de comemorar nosso progresso de animação fazendo uma barra de progresso!

Todos os conceitos que abordamos se unirão para criar algo assim. Uma barra de progresso é um elemento de interface do usuário muito comum, portanto, criar algo funcional como isso ajudará você a ver como outros elementos da Web podem ser animados.

Aqui está o HTML inicial:

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

E o CSS para dar vida:

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}

No primeiro conjunto de quadros-chave, a largura vai de 0 a 100% com duração de dois segundos. Os quadros-chave em progressMotion estão controlando a opacidade.

Curva de Bézier CSS

A função cubic-bezier() pode ser usada com a propriedade transition-timing-function para controlar como uma transição mudará a velocidade ao longo de sua duração. Você verá isso na animação. Veja como ele começa um pouco mais devagar e depois pega o ritmo?

É útil imaginar um invólucro de bezier como um quadrado. A parte inferior esquerda e a parte superior direita são locais onde estão os pontos-chave, que são o P0 e o P3. Eles são sempre definidos como (0,0) e (1,1), que não mudam. No entanto, P1 e P2 podem ser movidos com a função cubic-bezier() se você especificar novos pontos com um valor x ou y.

• x1 é a coordenada x do ponto de controle p1
• y1 é a coordenada y do ponto de controle p1
• x2 é a coordenada x do ponto de controle p2
• y2 é a coordenada y do ponto de controle p2

Aqui estão alguns valores de exemplo:

x1 = 0,7
y1 = 0,16
x2 = 0,2
y2 = 0,9

Então, um exemplo pode ficar assim:

cubic-bezier(.7,.16,.2,.9)

A barra de progresso é um ótimo exemplo de como um bezier pode personalizar o tempo de uma animação. Com transformações, transições e muitas outras opções, animações personalizadas podem ser facilmente criadas. Espero que ver esses exemplos básicos de animação CSS3 tenha ajudado você a ver que outras possibilidades existem.

O que vem a seguir: plugins do WordPress que você vai adorar

Baixe este e-book para obter uma lista dos nossos plugins mais recomendados para desenvolvedores! Descobrimos que todos esses plug-ins são fáceis de usar, não têm um desempenho muito pesado em seu site e são totalmente confiáveis.