cubic-bezier() é uma função de temporização CSS que define como uma animação acelera e desacelera. Seus quatro valores — x1, y1, x2, y2 — são dois pontos de controle de uma curva que mapeia o tempo ao progresso. O eixo X representa o tempo (0 a 1) e o eixo Y o progresso da animação.
Escolha um preset ou arraste os pontos de controle laranja na tela para moldar sua curva de easing. A bola animada mostra exatamente como sua temporização se sente, e a saída CSS está pronta para colar em qualquer transição ou animação.
Frequently Asked Questions
Q: O que é cubic-bezier em CSS?
O que é cubic-bezier em CSS? É uma função de temporização usada em transições e animações que define a curva de velocidade: quão rápido uma animação progride ao longo do tempo. O padrão é cubic-bezier(0.25, 0.1, 0.25, 1), também chamado de ease.
Q: Quais são os valores padrão de easing?
Quais são os valores padrão de easing? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) e linear = (0, 0, 1, 1).
Q: Como criar um efeito de quique?
Como criar um efeito de quique? Ultrapasse os valores Y além de 1, como cubic-bezier(0.34, 1.56, 0.64, 1). A curva excede brevemente o alvo e volta — um quique tipo mola.
Q: Por que minha animação parece quebrada com Y negativo?
Por que minha animação parece quebrada com Y negativo? Y negativo cria antecipação — o elemento se move para trás antes de avançar. É intencional para efeitos de back-easing, mas parece errado na maioria das transições de conteúdo.
Q: Posso usar cubic-bezier em animações?
Posso usar cubic-bezier em animações? Sim, tanto em transições quanto em animações @keyframes, pela propriedade timing-function. Também se aplica a animações vinculadas ao scroll.
Cores do Brasil
Do verde da bandeira ao azul dos azulejos, as cores brasileiras misturam natureza tropical, herança portuguesa e a energia do carnaval. Uma paleta viva que reflete a identidade visual do país.
Verde Bandeira #009C3BO verde da bandeira nacional, símbolo das matas
Amarelo Bandeira #FFDF00O ouro do losango da bandeira brasileira
Azul Bandeira #002776O azul do círculo e das estrelas
Azul Azulejo #1E5FA8Herança dos azulejos portugueses em igrejas e casarões
Rosa Choque #FF1493A energia vibrante do carnaval e das marcas jovens
Verde Amazônia #228B22A floresta tropical, pulmão do planeta
Amarelo Ouro #FFD700O ouro do barroco mineiro de Ouro Preto
Terracota Nordestina #CD5C5CA argila do sertão e do artesanato nordestino
Anil #4B0082Cor do vestido tradicional das baianas
Branco Areia #EDE4D3As praias de areia clara do litoral
Q: Qual é o verde da bandeira do Brasil?
Qual é o verde da bandeira do Brasil? O verde oficial da bandeira brasileira é aproximadamente #009C3B, junto com o amarelo #FFDF00 e o azul #002776.
Q: O que é o azul azulejo?
O que é o azul azulejo? É o azul característico dos azulejos portugueses (aproximadamente #1E5FA8), herança colonial presente na arquitetura de igrejas, casarões e cidades históricas brasileiras.