Facilitando o Visualizador de Função
Visualize, compare e gere funções de atenuação CSS com um editor interativo de curva cúbica-bézier SVG. Arraste os dois pontos de controle (P1, P2) na curva para criar sua própria atenuação personalizada - ou escolha entre mais de 18 predefinições integradas, incluindo atenuação, salto, elástico, costas e curva enfatizada do Material Design. Compare até 6 curvas de atenuação lado a lado na sobreposição de comparação, visualize o movimento com um ponto animado e copie o CSS pronto para produção para propriedades de transição e animação. Todo o processamento é executado localmente no seu navegador - totalmente gratuito, sem necessidade de inscrição.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
Sobre funções de flexibilização de CSS
- As funções de atenuação CSS controlam a taxa de alteração durante uma animação ou transição. Em vez de uma animação enfadonha em velocidade constante, a facilitação faz com que o movimento pareça natural - acelerando, desacelerando, saltando ou ultrapassando. O tipo mais comum é o cúbico-bezier(), definido por dois pontos de controle (P1, P2) que moldam a curva do início (0,0) ao final (1,1).
- O editor SVG interativo permite arrastar dois pontos de controle em uma grade de coordenadas. O eixo X representa o tempo (0% a 100% da duração da animação) e o eixo Y representa o progresso (0% a 100% da alteração da propriedade). A forma da curva entre estes pontos determina a flexibilização: secções íngremes significam mudanças rápidas, secções planas significam mudanças lentas.
- P1 (primeira alavanca) controla a aceleração inicial; P2 (segunda alavanca) controla a desaceleração final. P1 próximo ao canto inferior direito cria uma partida lenta que acelera. P2 próximo ao canto superior direito cria uma partida rápida que desacelera. Valores fora do intervalo 0-1 (como y1=-0,5) criam efeitos de overshoot, como salto ou salto.
- Atenuação, duração e atraso são propriedades independentes da animação. A duração controla quanto tempo a animação é executada. O atraso controla quando ele inicia. A facilitação controla o ritmo do movimento dentro dessa duração. Uma duração rápida com uma suavização dramática cria um movimento rápido e animado. Uma duração lenta com suavização suave cria transições suaves e elegantes.
Perguntas frequentes
Uma função de atenuação CSS define a taxa de alteração de uma propriedade ao longo do tempo durante uma animação ou transição. Em vez de se mover em velocidade constante, a atenuação permite que a animação acelere, desacelere, salte ou ultrapasse. O tipo mais comum é o cúbico-bezier(), definido por quatro valores que representam dois pontos de controle que moldam a curva de atenuação.
Uma curva cúbica de Bézier possui quatro parâmetros: x1, y1, x2, y2. P1 (x1, y1) controla como a animação começa - determina a aceleração inicial. P2 (x2, y2) controla como a animação termina - determina a desaceleração final. Ambos os pontos ficam em uma grade de coordenadas onde X = tempo (0 a 1) e Y = progresso (0 a 1).
Quando o valor de um ponto de controle Y fica abaixo de 0 ou acima de 1, a curva ultrapassa - o que significa que a propriedade animada vai temporariamente além de seu valor final. Isso cria efeitos de salto e primavera. Por exemplo, Back In começa retrocedendo ligeiramente antes de avançar.
O Ease-in começa lento e acelera - bom para elementos que entram na tela. O Ease-out começa rápido e desacelera - bom para elementos que saem da tela. A facilidade combina ambos: um início suave e um final suave com uma seção intermediária mais rápida.
Use a função cube-bezier() em sua propriedade de transição ou animação: transição: opacidade 0,3s cube-bezier(0,25, 0,1, 0,25, 1);. Os quatro valores são x1, y1, x2, y2. Você pode arrastar os pontos de controle nesta ferramenta para encontrar a curva perfeita e copiar o valor CSS resultante.
Para a maioria das interações da interface do usuário (estados de foco, modais, dicas de ferramentas), a facilidade é recomendada - objetos que iniciam rápido e desaceleram parecem responsivos e naturais. Para animações de entrada, use a facilidade de entrada ou a curva enfatizada do Material Design. Evite linear para UI - parece robótico.
Sim. Use valores arbitrários: transição-[cubic-bezier(0.68,-0.55,0.27,1.55)] ou adicione atenuações personalizadas ao seu tailwind.config.js em theme.extend.transitionTimingFunction.
Sim - cube-bezier() e atenuações de palavras-chave (facilidade, facilidade de entrada, facilidade de saída, facilidade de entrada, linear) são suportadas em todos os navegadores modernos. Steps() também é amplamente compatível com Chrome, Firefox, Safari e Edge.