Um tutorial simples de animação CSS

JavaScript Teacher Blocked Desbloquear Seguir Seguindo 11 de janeiro

Vamos transformar uma caixa quadrada amarela em um círculo verdeazulado . ( siga-me no Twitter )

Esses diagramas são do CSS Visual Dictionary – pegue uma cópia aqui .

Confira a figura acima. Logo que .animateClass for atribuído a um elemento, a animação começará a ser reproduzida. A classe tem um link para animationName . Deve corresponder ao nome especificado pela regra @keyframes . Esta animação está definida para durar 3 segundos ou 3000ms, conforme especificado.

Nota : A suavização adiciona sabor à sua animação – fornecendo uma curva descrevendo a velocidade relativa de sua animação em um determinado ponto na linha do tempo.

Vamos abordar o easing e todas as outras propriedades de animação CSS ao longo do restante deste artigo, com base nesse exemplo simples.

Então, como isso funciona?

Você pode animar qualquer propriedade CSS cuja posição física, dimensões , ângulo ou cor possa ser alterada. A animação básica é surpreendentemente simples de implementar usando quadros-chave.

Quadros- chave de animação CSS são especificados usando a diretiva @keyframes . Um quadro-chave é simplesmente o estado do elemento em um único ponto na linha do tempo da animação.

O mecanismo de animação CSS interpola automaticamente entre os quadros-chave de animação. Tudo o que você precisa fazer é especificar o estado das propriedades CSS nos pontos inicial e final da animação.

Uma vez que todos os nossos locais de keyframe estejam configurados (que geralmente são especificados em porcentagens), tudo o que precisamos fazer é configurar os padrões para o nosso elemento original que desejamos animar.

Em seguida, crie uma animação nomeada usando o formato @keyframes animationName {…} , que armazena todos os quadros-chave. Vamos dar uma olhada nisso daqui a pouco!

Finalmente, crie uma classe especial que definirá a duração , a direção , a repetibilidade e o tipo de atenuação da sua animação… e vincule-a ao mesmo nome de animação usado pela diretiva @keyframes . Este processo é explicado visualmente nas seções a seguir.

Propriedades de animação CSS

A propriedade de animação é a abreviatura para as 8 propriedades de animação independentes descritas abaixo:

animation-name – nome do quadrochave especificado pela regra @keyframes .

animação duração – duração da animação em milisegundos.

animation-timing-function – especifica a função de atenuação.

delay de animação – adiciona atraso antes que a animação comece a ser reproduzida.

animation-iteration-count – número de vezes que a animação deve ser reproduzida.

direção de animação – reproduz para frente, para trás ou sequência alternativa.

animation-fill-mode – estado da animação quando não está sendo reproduzido.

animation-play-state – especifica se a animação está sendo executada ou se está em pausa.

Nas seções a seguir, vamos explorar cada um visualmente.

nome da animação

O nome do identificador de animação alfanumérico:

O nome da animação deve se referir ao especificado pela diretiva @keyframes :

animação-duração

Você geralmente deseja planejar o tamanho da sua animação primeiro.

Como você pode ver na figura acima, você pode especificar a duração em segundos ou milissegundos, se precisar de mais precisão. Por exemplo, 3000ms é o mesmo que 3s e 1500ms é o mesmo que 1,5s

Também é possível atribuir um atraso em milissegundos antes que a animação comece a ser reproduzida.

direção de animação

Você pode atribuir qualquer um dos quatro valores à propriedade de direção da animação :

A figura exibe acima t ele valores normais, reverter, alternativo e alternam-inverso e os seus efeitos.

Mecanismo de animação CSS irá interpolar automaticamente entre os quadros. Um estado de animação interpolado é simplesmente qualquer estado entre dois quadros. À medida que a cor muda do amarelo para o azul-petróleo, ela muda gradualmente ao longo do período de tempo especificado pela propriedade de animação (aqui, como uma mão curta).

contagem de animação-iteração

Número de vezes que a animação será repetida.

Reproduzir animação 1 vez (padrão) .Repita animação 2 vezes. Repita animação 3 vezes.

Como você pode ver, o problema óbvio aqui é que a animação irá "pular" de volta para o primeiro quadro novamente.

Você pode usar algumas das outras propriedades de animação para garantir que esse salto não ocorra. Você pode projetar sua animação para fazer um loop ou ajustar outras propriedades com base na dinâmica da interface do usuário que você está procurando. Desta forma, você pode projetar apenas “metade” de sua animação, e ajustar propriedades para jogá-lo para frente ou para trás, vamos dizer sobre os acontecimentos do mouse em e mouse-out.

função de temporização de animação

A atenuação é especificada pela função de temporização de animação . Acrescenta personalidade à sua animação. Isso é feito ajustando a velocidade da animação em qualquer ponto da linha do tempo. Start, Middle e End Points são de particular interesse. Cada tipo de atenuação é definido por uma função de curva de Bézier .

Animação-tempo-função: linear Animação-tempo-função: facilidade Animação-tempo-função: facilidade-in Animação-tempo-função: facilidade-out Animação-tempo-função: facilidade-out-out Você pode criar seu próprio cúbico Bézier curvas. Dois pontos de controle P1 e P2 são passados para a função cubic-bezier como argumentos. O intervalo de valores está entre 0,0 e 1,0 .

Como a atenuação é determinada por uma equação, você pode fornecer seus próprios argumentos para criar curvas exclusivas para obter um tipo específico de velocidade não disponível pelos valores predefinidos. Conforme mostrado nos gráficos abaixo, você pode recriar o conjunto padrão de valores usando uma função cúbica-bezier :

Se você precisar de uma curva ligeiramente diferente para seus elementos de interface do usuário, tente brincar com os valores até obter o efeito desejado.

animação-fill-mode

Quando uma animação não está sendo reproduzida no momento, ela é definida para o estado do modo de preenchimento . A propriedade animation-fill-mode preenche uma animação que não é reproduzida com um conjunto de propriedades escolhido, geralmente obtido do primeiro ou do último quadro-chave.

Valores possíveis:

none / Não aplica nenhum estilo ao elemento animado antes ou depois da execução da animação.

encaminha / Retém estilos do último quadro-chave (pode ser afetado por direção de animação e contagem de iteração de animação .)

backwards / Get estilos do primeiro quadro-chave (pode ser afetado pela direção de animação ) também mantém esse estilo durante o estado de atraso de animação .

Ambos / Estender propriedades de animação em ambas as direções ( para frente e para trás ).

animação-play-state

A propriedade animation-play-state especifica se a animação está sendo executada ou pausada.

Valores possíveis:

pausado / a animação está pausada.

em execução / Animação está sendo reproduzida no momento.

Por exemplo, você pode pausar a animação no foco do mouse:

Definir o estado da animação para pausado.

Cinemática frente e verso

Não há qualquer suporte out-of-the-box para a cinemática inversa em CSS. Você tem que escrever JavaScript personalizado para codificar a física.

Mas, o efeito pode ser simulado usando a propriedade transform: rotate (degree) e transform-origin para especificar o ponto de pivot entre um elemento pai e um filho.

Gire em torno do ponto de fixação no elemento raiz.

O ponto Raiz é o local onde o elemento primário é anexado a outro elemento pai ou a um ponto estático imaginário no espaço. Se o Elemento A se mover, ele deve afetar o Elemento B, de tal maneira como se eles estivessem ligados um ao outro em um Ponto de Rotação de Rotação.

Isso significa calcular todos os tipos de ângulos e comprimentos usando fórmulas trigonométricas. Podemos fazer isso com JavaScript ou usando uma biblioteca de vetores / trigonometria existente. Mas, felizmente, o CSS já fornece suporte para esses tipos de elementos dinâmicos através da propriedade de origem de transformação nativa

A cinemática avançada é quando, movendo o Elemento A, o movimento do Elemento B também é afetado (como uma reação em cadeia), como se eles estivessem ligados um ao outro em um ponto de pivô compartilhado.

A cinemática inversa é o inverso disso: o movimento físico do Elemento B afeta o Elemento A desde que seja anexado a algum ponto estático ou outro elemento pai. Se não, os dois elementos podem flutuar no espaço 🙂 Isso é muito parecido com articulações ósseas em um personagem animado!

Passeio noturno

Kyle Wetton é o criador de um dos maiores exemplos de cinemática inversa que tenho visto, usado para fazer uma animação de ciclo de caminhada de uma figura humana inteiramente em CSS puro.

Obtenha mais Freemium através de redes sociais

Você pode, no Twitter para brindes de fim de semana em PDF.

Siga-me no Instagram para um rápido hit de JavaScript.

Confira meu livro CSS na Amazon.

Obter todas as propriedades CSS em uma única referência visual

Se você quiser que o paperback (recomendado) procure por ele na Amazon.

Este livro CSS contém todas as propriedades CSS com diagramas visuais.

Os diagramas neste tutorial foram influenciados diretamente pelo manuscrito!

Dicionário visual CSS 28% OFF para leitores médios.

Todas as propriedades do CSS – Visualmente!

Compre CSS Visual Dictionary

Este livro contém diagramas descrevendo todas as propriedades CSS.

28% OFF para leitores médios.

* Agora também inclui um novo capítulo sobre CSS Animation .