Animação - CSS-Tricks

Anonim

A animationpropriedade em CSS pode ser usado para animar muitas outras propriedades CSS tais como color, background-color, height, ou width. Cada animação precisa ser definida com a @keyframesregra at, que é então chamada com a animationpropriedade, assim:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Cada @keyframesregra define o que deve acontecer em momentos específicos durante a animação. Por exemplo, 0% é o início da animação e 100% é o final. Esses quadros-chave podem então ser controlados pela animationpropriedade abreviada ou por suas oito subpropriedades, para fornecer mais controle sobre como esses quadros-chave devem ser manipulados.

Subpropriedades

  • animation-name: declara o nome da @keyframesregra at para manipular.
  • animation-duration: o tempo que uma animação leva para completar um ciclo.
  • animation-timing-function: estabelece curvas de aceleração predefinidas como easeou linear.
  • animation-delay: o tempo entre o elemento sendo carregado e o início da sequência de animação (exemplos legais).
  • animation-direction: define a direção da animação após o ciclo. Seu padrão é redefinido em cada ciclo.
  • animation-iteration-count: o número de vezes que a animação deve ser executada.
  • animation-fill-mode: define quais valores são aplicados antes / depois da animação.
    Por exemplo, você pode definir o último estado da animação para permanecer na tela ou pode definir para voltar para antes de quando a animação começou.
  • animation-play-state: pausa / reproduz a animação.

Essas subpropriedades podem ser usadas da seguinte forma:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

Aqui está uma lista completa de quais valores cada uma dessas subpropriedades pode assumir:

animation-timing-function atenuação, atenuação, atenuação, consolidação, linear, cúbico-bezier (x1, y1, x2, y2) (por exemplo, cúbico-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs ou Xms
animation-delay Xs ou Xms
animation-iteration-count X
animation-fill-mode para a frente, para trás, ambos, nenhum
animation-direction normal, alternativo
animation-play-state pausado, correndo, correndo

Etapas múltiplas

Se uma animação tiver as mesmas propriedades inicial e final, é útil separar por vírgula os valores 0% e 100% dentro @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Múltiplas animações

Você pode separar os valores por vírgula para declarar várias animações em um seletor também. No exemplo abaixo, queremos mudar a cor do círculo em um @keyframeenquanto também o empurramos de um lado para o outro.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Desempenho

Animar a maioria das propriedades é uma preocupação de desempenho, portanto, devemos proceder com cuidado antes de animar qualquer propriedade. No entanto, existem certas combinações que podem ser animadas com segurança:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Quais propriedades podem ser animadas?

O MDN tem uma lista de propriedades CSS que podem ser animadas. Propriedades animáveis ​​tendem a cores e números. Um exemplo é uma propriedade não animável background-image.

Suporte de navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
4 * 5 * 10 12 5,1 *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Mais Informações

  • animação em MDN
  • Usando animações CSS
  • animação em W3C
  • Jank rebentando para melhor desempenho de renderização
  • Animação da web no trabalho
  • Cinco maneiras de animar com responsabilidade
  • Salto de estado, atrasos negativos, origem de animação e muito mais
  • Iniciando animações CSS no meio do caminho
  • Animações de alto desempenho