Propriedades animáveis?

transform, opacity, color, width, height, border-radius, etc.

Nome

Ferramenta gratuita online Gerar animações CSS quadro-chave, sem instalação

Configurações

Nome

Duração (s)

Easing

ease-out

Direção

normal

Iterações

Estado inicial

opacity

transform

Estado final

opacity

transform

Resultado

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out 1 normal;
}

Visualizar

Box

Se esta ferramenta ajudou você, pague um café ao autor.

Pagar um café

Mais Ferramentas

Conversor de armazenamento Codificador/Decodificador JWT Calculadora Chmod Gerador de CSS Sprite Analisador de estatísticas de texto Analisador User-Agent Gerador CSS backdrop-filter Diagrama de Ishikawa

Nome

Como criar animações CSS

Mais Ferramentas

Comentários