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. Transformações são usadas para fazer um elemento mudar de um estado para outro. Exemplos seriam elementos de rotação, movimentação, 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 esse 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 fornecidos 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ê deseja 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 x e y 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 todas 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 alerta, é 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 forma de controlar a velocidade da animação ao alterar as propriedades do CSS. Um exemplo com o qual você provavelmente já se deparou é 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. Esse “escurecimento lento” foi criado com uma transição.

Se você estiver especificando muitos valores, a abreviação será útil. A propriedade CSS transition é uma propriedade abreviada para transition-property , transition-duration , transition-timing-function e 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, e não 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. Existem 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 auto-explicativo. 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 com seu valor padrão. Se inherit for especificada, isso significa que ela 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 para o público na web). Não há nada de errado em adicionar um toque divertido, mas é tentador exagerar na animação. O movimento que você cria deve transmitir significado e aprimorar a experiência do usuário, não desviar a atenção dele. Dito isso, é hora de começar a criar!

Eu quero chamar a atenção para o fato de 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 repeti-los é apenas para fins de demonstração.

Movendo uma imagem com a propriedade CSS Transform

Antes de entrarmos em transformações e transições complicadas, vamos falar sobre coordenadas em uma grade de eixo. (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 vão parecer 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 de baixo para cima.

Animação Um: Transformação Básica com Movimento Horizontal

Tocamos brevemente na base translate() e como ele pode mover um elemento. Quando colocado em prática, pode realmente flutuar no 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 subir para respirar 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 deverão ser especificados. Para fazer o submarino se mover para a direita e para cima, o valor de x deve ser positivo e o valor de y deve ser negativo. Se o valor 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 pairar de .underwater . Ao criar os estilos para o movimento em .underwater:hover .move-right , a ação acontecerá ao pairar.

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 esta 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 move-se 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 para ease-in-out o que proporciona um início e um 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.

Princípios básicos do quadro-chave

Dentro de @keyframes é onde você define os estilos e estágios da animação. Aqui está o exemplo que usaremos, o que ajudará a dar um efeito de “fade in enquanto se move 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 projetado acima, @keyframes contém os estilos que o elemento terá em determinados momentos.

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

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 a aparência da animação; as subpropriedades definem regras específicas para a animação. O tempo, a duração e outros detalhes importantes de como a sequência de animação deve progredir estão incluídos nas subpropriedades.

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

• Animation-name: Nome da @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. Exemplos são linear , ease , ease-out ease-in , 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 ser repetida. 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 passagem pela 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 sua execução.
• Animation-play-state: Com esta opção, você pode pausar e retomar a sequência de animação. Os exemplos são none , forwards , 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 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 fazer o submarino ricochetear no texto, portanto, 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 cúbico-bezier em 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 esse 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 a ele:

 @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.

CSS Curva Bezier

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. Vê como começa um pouco mais devagar e depois pega o ritmo?

É útil imaginar um invólucro de Bezier como um quadrado. O canto inferior esquerdo e o canto superior direito são locais onde estão os pontos-chave, que são o P0 e o P3. Estes 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 = .2
y2 = 0,9

Então, um exemplo pode ser 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.