Funções de Aceleração: ease linear cubic-bezier
Controle a curva de velocidade das transições usando palavras-chave integradas e funções cubic-bezier().
Funções de Aceleração: ease linear cubic-bezier é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que é uma função de suavização
Uma função de suavização controla a curva de velocidade de uma transição ou animação — isto é, quão rapidamente ela acelera ou desacelera durante sua duração.
linear
linear mantém uma velocidade constante durante toda a transição. É útil para barras de carregamento e indicadores de progresso nos quais se espera um movimento constante.
<div class="progress-track"><div class="progress"></div></div>ease (Padrão)
ease começa rapidamente e depois desacelera perto do fim. Essa é a opção padrão e transmite uma sensação natural na maioria das transições de interface.
ease-in
ease-in começa lentamente e acelera. É uma boa opção para elementos que estão saindo da tela (animações de saída).
<div class="modal">Open</div>
<div class="modal closing">Closing (faded to invisible)</div>ease-out
ease-out começa rapidamente e desacelera. É excelente para elementos que entram na tela — eles chegam com energia e se acomodam suavemente.
<div class="modal opening">Modal content</div>ease-in-out
ease-in-out começa e termina lentamente, com um movimento mais rápido no meio. É a melhor opção para animações em loop ou de ida e volta.
cubic-bezier()
Define uma curva cúbica de Bézier personalizada com quatro pontos de controle. Permite criar curvas de suavização semelhantes a molas e outras curvas personalizadas.
<div class="card">Card</div>Lendo valores de cubic-bezier
Os quatro valores definem dois pontos de controle: cubic-bezier(x1, y1, x2, y2). Valores acima de 1 no eixo y criam efeitos de ultrapassagem (mola). Use ferramentas como easings.net para visualizar as curvas.
Função steps()
steps(n, direction) divide a animação em n etapas discretas de mesmo tamanho. É perfeita para animações de sprites e efeitos de máquina de escrever.
<div class="sprite"></div>Palavras-chave de direção de steps()
O segundo argumento controla onde ocorre a etapa:
jump-start: primeira etapa no instante 0jump-end: última etapa no instante final (padrão)jump-both: etapas no início e no fimjump-none: nenhuma etapa em qualquer uma das extremidades
Moderno: linear() para curvas complexas
A nova função linear() permite definir curvas de suavização arbitrárias por meio de vários pontos — possibilitando efeitos de mola e de quique em CSS puro, sem as limitações de cubic-bezier.
<div class="spring">Spring easing</div>Verificação rápida
Qual função de suavização mantém uma velocidade constante durante toda a transição?
Recapitulação
As funções de suavização controlam as curvas de velocidade das animações. Opções integradas: linear, ease, ease-in, ease-out, ease-in-out. As curvas personalizadas usam cubic-bezier(). As etapas discretas usam steps(). A nova função linear() permite criar curvas complexas semelhantes a molas.
Perguntas Frequentes
A aula “Funções de Aceleração: ease linear cubic-bezier” é grátis?
Sim — o texto completo de “Funções de Aceleração: ease linear cubic-bezier” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Funções de Aceleração: ease linear cubic-bezier”?
Controle a curva de velocidade das transições usando palavras-chave integradas e funções cubic-bezier(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Funções de Aceleração: ease linear cubic-bezier”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Duração e Temporização da Propriedade de Transição
- Funções de Aceleração: ease linear cubic-bezier
- Transicionando Várias Propriedades
- Desempenho: Propriedades Transformáveis vs. com Repintura