Recomendação de curso:

Função CSS steps()

Definição e uso de CSS steps() A função é usada para criar funções de tempo de passo para animações.

Essa função divide a duração da animação em intervalos iguais de tamanho especificados (n). Por exemplo: se n for 4, a animação será dividida em 4 partes. Ela dividirá o tempo de duração de 0% a 100% em 4 partes;分别是 0%-25%、25%-50%、50%-75% 和 75%-100%.

Exemplo

Crie diferentes funções de tempo de passo para animações:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Experimente você mesmo

Sintaxe CSS

steps(n, step-position)
Valor Descrição
n Obrigatório. Especifica o número de passos/intervalos.
step-position

Opcional. Especifica o tempo em que ocorrem os saltos entre os valores. Use uma das seguintes palavras-chave:

  • jump-start ou start: o primeiro passo ocorre no início da animação
  • jump-end ou end: o último passo ocorre no final da animação. end é o valor padrão
  • jump-none: nenhum salto antecipado ou atrasado ocorre
  • jump-both: saltos antecipados e atrasados ocorrem ao mesmo tempo

Detalhes técnicos

Versão: Funções de Suavização CSS Nível 1

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Páginas relacionadas

Referência:Propriedade animation CSS

Referência:Propriedade animation-timing-function CSS