1. animation: define o nome da animação, a duração, a função de tempo e se ela é repetitiva ou não. Exemplo:

Copy code
/* Cria uma animação chamada "slide-in" que dura 2 segundos, usa a função de tempo "ease-out" e não se repete */
.elemento {
  animation: slide-in 2s ease-out;
}

1. @keyframes: define as etapas da animação. É preciso especificar um nome para as keyframes e indicar quais propriedades devem ser alteradas e em que momento. Exemplo:

Copy code
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

1. animation-iteration-count: define quantas vezes a animação deve se repetir. O valor padrão é 1, mas você pode usar valores como "infinite" para animações contínuas.
2. animation-direction: define se a animação deve seguir o sentido normal ou inverso. O valor padrão é "normal", mas você pode usar "reverse" para animações inversas.
3. animation-fill-mode: define como o elemento deve ficar quando a animação termina. O valor padrão é "none", mas você pode usar "forwards" para manter o estado final da animação.
4. animation-timing-function: define a função de tempo da animação. Existem várias opções pré-definidas, como "ease", "linear" e "ease-in-out".

Exemplo de como ficaria o código completo para uma animação de "slide-in" :

Copy code
/* Cria uma animação chamada "slide-in" */
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Aplica a animação ao elemento */
.elemento {
  animation: slide-in 2s ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

É importante lembrar que além dessas propriedades existem outras e algumas já são suportadas pelos navegadores modernos, é importante se preocupar com a compatibilidade com navegadores mais antigos ou utilizar ferramentas para