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
HOVER ME
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
300
0
Efeitos de foco
100%
100%
0°
0px
0px
8px
8px
Related Tools
Conversor SCSS para CSS
Transforme seu código SCSS em CSS. Rápido, fácil e seguro.
Gerador de transição CSS3
Transição suave de opacidade
Minificador CSS
Comprima e otimize seu código CSS com precisão profissional
Calculadora de hash Whirlpool
Gere hashes Whirlpool de forma rápida e fácil
Gerador de hash MD5
Gere hashes MD5 de forma rápida e fácil
Texto para ASCII
Converta texto em código ASCII sem esforço