Ferramentas CSS/Editor de Funções Easing
Editor de Funções Easing
Projete funções easing cubic-bezier personalizadas para animações suaves
Editor de Curvas
Arraste os pontos de controle para ajustar a curva
Controles
1s
Prévia da Animação
Presets
Código CSS
Loading...CSS Easing Function Guide
Learn how to create smooth and natural animations
What is Easing?
Easing functions specify the rate of change of an animation over time. The cubic-bezier function defines a curve with four control points, allowing you to create custom acceleration and deceleration patterns. This makes animations feel more natural and engaging than linear motion.
How to Use This Tool
- Drag the control points on the curve to adjust the easing
- Use preset buttons for common easing functions
- Preview the animation to see the effect in action
- Copy the cubic-bezier value to use in your CSS
Pro Tips
- Use ease-out for entering animations and ease-in for exiting
- Values outside 0-1 on the Y axis create overshoot effects
- Linear easing works best for opacity and color transitions
Browser Support
The cubic-bezier() function is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the CSS transitions and animations specifications with excellent compatibility.
Perguntas frequentes
O que significam os 4 valores do cubic-bezier?
Em cubic-bezier(x1, y1, x2, y2), x1, y1 sao o primeiro ponto de controle, x2, y2 sao o segundo. Os valores x devem estar entre 0-1 (representam tempo), os valores y podem sair do intervalo (efeito overshoot). Os pontos inicial (0,0) e final (1,1) sao fixos.
Qual a diferenca entre ease, ease-in e ease-out?
ease tem inicio e fim suaves com meio rapido. ease-in comeca lento e acelera. ease-out comeca rapido e desacelera. ease-in-out e lento no inicio e fim. Para animacoes de UI, ease-out e geralmente mais usado.
Como criar efeito de overshoot (elastico)?
Use cubic-bezier com valores y menores que 0 ou maiores que 1. Exemplo: cubic-bezier(0.68, -0.55, 0.27, 1.55) cria um efeito elastico que ultrapassa o alvo e retorna. Esse efeito adiciona vida a cliques de botoes ou aparicao de modais.
Quando usar a funcao steps()?
A funcao steps() cria animacoes em etapas discretas em vez de continuas. E adequada para animacoes de sprites, efeitos de maquina de escrever, movimento de ponteiro de relogio. steps(5) divide a animacao em 5 etapas.
Qual funcao easing devo escolher?
Use ease-out quando elementos aparecem (aparece rapido e assenta suavemente), ease-in quando desaparecem (comeca lento e desaparece rapido). Para animacoes de movimento, ease-in-out e natural. Para mudancas de cor de fundo ou opacidade, linear e adequado.