Gerador de transição CSS3
Transição suave de opacidade
Predefinições populares
Efeito de esmaecimento
Transição suave de opacidade
Efeito de escala
Redimensionar elemento ao passar o mouse
Efeito de rotação
Girar elemento ao passar o mouse
Efeito de deslizamento
Mover posição do elemento
Mudança de cor
Transição de cor de fundo
Sobre transições
As transições CSS permitem que você altere os valores das propriedades sem problemas, durante um determinado período.
As propriedades comumente animadas incluem:
- largura, altura
- margem, preenchimento
- opacidade, cor
- transform (scale, rotate, translate)
- background-color
Dica profissional: use a opção 'Todas as propriedades' para animar todas as alterações.
Preview
Código gerado
.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; } .element:hover { /* Hover styles will be generated here */ }
Controles de transição
Efeitos de foco
Related Tools
Gerador de transição CSS3
Transição suave de opacidade
Conversor SCSS para CSS
Transforme seu código SCSS em CSS. Rápido, fácil e seguro.
Crie um belo gradiente de texto CSS sem esforço
Crie efeitos de texto gradiente impressionantes para o seu site
Conversor de unidade de peso
Converta entre diferentes unidades de peso com precisão para suas necessidades culinárias, físicas e científicas
Calculadora de hash SHA-256
Gere hashes SHA-256 de forma rápida e fácil
Calculadora de intervalo de confiança
Calcule intervalos de confiança para seus dados de amostra com precisão e facilidade.