Como usar CSS3 Transitions & Animations para destacar as alterações da interface do usuário

Designers e artistas têm uma longa história de experimentação com movimento, efeitos e diferentes tipos de ilusões com o objetivo de adicionar uma camada extra ao seu trabalho. O movimento de op art começou a usar ilusões de ótica nos anos 60 para dar a impressão de movimento.

Desde então, abordagens mais recentes e mais recentes surgiram, como a arte cinética recentemente popular que amplia a perspectiva do espectador usando o movimento multidimensional. Motion também apareceu na ciência da computação com a invenção do primeiro cursor piscando em 1967.

No desenvolvimento front-end, os elementos DOM geralmente eram animados pelo JavaScript antes do lançamento do CSS3, e é um método que ainda funciona, mas o novas propriedades introduzidas pelo CSS3 nos permite melhorar nossos projetos com diferentes efeitos e movimento de uma maneira mais intuitiva.

As duas principais técnicas que o CSS3 oferece são transições e animações. Neste post vamos dar uma olhada no que eles são, qual é a diferença entre eles e como você pode usá-los.

Transições

Transições e animações são usadas para visualizar mudanças no estado de um elemento HTML por modificando uma ou mais de suas propriedades CSS.

A forma mais simples de visualização de mudança de estado é alterar a cor de um botão ou de um link quando ele é exibido. Quando isso acontece, o elemento recebe um estilo ligeiramente diferente, que geralmente é percebido pelo espectador como se algo tivesse se movido na tela.

Alterar as propriedades CSS de um link em foco (ou foco, ou clique) é a forma mais antiga e mais simples de transições, e existia bem antes da era CSS3.

 um cor: laranja;  a: hover color: red;  a: foco cor: azul;  a: visitou color: green; 

As transições são usadas quando um elemento HTML é alterado de um estado predefinido para outro. O CSS3 introduziu novas propriedades que permitem visualizações mais sofisticadas do que antes, como funções de temporização ou controle de duração.

Vamos dar uma olhada nas novas propriedades CSS na próxima seção, depois de entender como as animações diferem. Por enquanto, vamos ver as coisas mais importantes que você precisa saber sobre transições.

1. Eles sempre têm um começo e um estado final.
2. Os estados entre os pontos inicial e final são definidos implicitamente pelo navegador, não podemos mudar isso com CSS.
3. Eles exigem desencadeamento explícito, como adicionar um novo pseudoclass por CSS ou uma nova classe por jQuery.

Você pode ver um belo exemplo de transições CSS3 inteligentemente utilizadas abaixo, nas quais o autor revela informações ocultas de uma forma que não é intrusiva, mas ainda orienta o foco dos usuários no novo conteúdo.

Animações

Se quisermos visualizar alterações de estado com movimentos mais complicados ou se não tivermos um acionador explícito, por exemplo se quisermos iniciar o efeito quando a página for carregada, as animações são o caminho a percorrer.

As animações tornam possível definir um caminho mais complexo configurando e configurando quadros-chave. Quadros-chave são pontos intermediários no decorrer da animação, o que nos permite mudar o estilo do elemento animado quantas vezes quisermos.

Embora o CSS3 ofereça ótimas maneiras de criar animações sofisticadas, geralmente é mais difícil criá-las do que transições. É por isso que existem muitas ótimas bibliotecas de animação por aí, que podem facilitar nosso trabalho..

As coisas mais importantes que você precisa saber sobre as animações CSS3 incluem:

1. eles não exigem acionamento explícito, eles podem iniciar no carregamento da página ou quando outro evento DOM ocorre no navegador
2. eles podem ser usados ​​nos casos em que as transições são usadas, por exemplo, quando uma nova classe ou pseudoclass é adicionada ou removida (embora seja um caso de uso menos frequente)
3. eles exigem que definamos alguns quadros-chave (estados intermediários)
4. podemos especificar o número, a frequência e o estilo desses keyframes

No exemplo abaixo, você pode ver um menu suspenso animado. A animação começa quando clicamos no botão. Isso é obtido adicionando classes extras aos elementos da lista com jQuery quando o evento click ocorre.

Essas novas classes são animadas com @keyframes regras no arquivo CSS. As classes extras são removidas pelo jQuery quando o usuário clica no botão na próxima vez, e o menu fica oculto novamente.

Propriedades CSS e O @keyframes Na regra

Para transições, podemos usar o transição propriedade abreviada ou quatro propriedades relacionadas à transição: propriedade de transição, duração da transição, função de temporização de transição, e atraso de transição. A propriedade abreviada contém todas as propriedades únicas de uma forma abreviada.

Para animações, há o animação propriedade de taquigrafia em nossas mãos que representa nada menos que 8 propriedades de animação única, ou seja, nome da animação, animação-duração, função de temporização de animação, atraso de animação, contagem de animação-iteração, direção de animação, animação-fill-mode, e animação-play-state.

O mais importante com as transições e animações é que sempre precisa especificar as propriedades CSS que serão modificadas durante a mudança de estado. Com transições, é assim:

 .elemento fundo: laranja; propriedade de transição: plano de fundo; duração da transição: 3s; função de temporização de transição: facilidade de entrada;  .element: hover background: red; 

Nós especificamos o fundo propriedade, porque isso é o que será alterado durante a transição.

Podemos alterar mais de uma propriedade CSS em uma transição, neste caso o código acima seria modificado assim: propriedade de transição: plano de fundo, borda;. Nós também podemos usar o propriedade de transição: todos;, se não quisermos especificar cada propriedade separadamente.

Nós podemos escolher a taquigrafia transição propriedade também. Se fizermos isso, precisamos sempre prestar atenção à ordem correta das propriedades internas (veja a sintaxe nos documentos)..

 .elemento fundo: laranja; transição: facilidade de fundo 3s;  .element: hover background: red; 

Se queremos criar uma animação, somos obrigados a especificar o relacionado quadros-chave. As propriedades CSS precisam ser modificadas separadamente @keyframes at-regras. Aqui está um exemplo de como podemos fazer isso:

 .elemento position: relative; nome da animação: slide; animação-duração: 3s; função de temporização de animação: facilidade de entrada;  @keyframes slide 0% esquerda: 0;  50% à esquerda: 200px;  100% esquerda: 400px; 

No exemplo acima, criamos um efeito deslizante muito simples. Nós definimos o nome da animação, em seguida, vinculou 3 quadros-chave a ele que especificamos no @keyframes slide … at-regras. As porcentagens referem-se à duração da animação, então 50% acontece em 1.5s no exemplo.

Nós poderíamos usar a taquigrafia animação propriedade também, ou poderia definir os quadros-chave com os mais simples de para regra da seguinte maneira:

 .elemento position: relative; animação: slide 3s facilidade;  @keyframes slide from left: 0;  para left: 400px; 

A criação de animações mais complexas é sua própria forma de arte, se você estiver interessado, você pode ler dois dos nossos tutoriais de animação sobre como criar um letreiro avançado e como criar um efeito de ressalto.

Ao construir transições e animações, você precisa saber que nem todas as propriedades CSS podem ser animadas, por isso é sempre uma boa idéia verificar a propriedade que você deseja alterar no CSS Animatable.

As animações e transições CSS3 trabalharam com prefixos de fornecedores por um longo tempo, o que não precisamos mais usar, no entanto, a Mozilla Developer Network ainda recomenda adicionar o -webkit prefixo por um tempo, já que o suporte para navegadores baseados em Webkit só recentemente.