Como você pode usar animações CSS3 em vez de JavaScript?

1 O que são animações CSS3?

As animações CSS3 são um conjunto de propriedades e regras que permitem criar transições suaves entre diferentes estados de um elemento. Você pode especificar a duração, o tempo, a direção, a iteração e os quadros-chave da animação, bem como aplicar funções de atenuação para criar efeitos realistas e naturais. Você também pode usar o @Regra de quadros-chave para definir as etapas intermediárias da animação, como os valores Início, Fim e Intermediário das propriedades que você deseja animar.

4 Como girar um elemento em torno de seu centro com animações CSS3?

Você também pode usar animações CSS3 para girar um elemento em torno de seu centro ou qualquer outro ponto. Para fazer isso, você precisa animar a propriedade transform do elemento, usando a função rotate. Por exemplo, você pode usar o código a seguir para girar um elemento 360 graus a cada segundo:

.rotate {
  animation: rotate 1s infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}        

5 Como transformar a forma de um elemento com animações CSS3?

As animações CSS3 também podem ajudá-lo a transformar a forma de um elemento, como dimensionar, distorcer ou distorcê-lo. Para fazer isso, você precisa animar a propriedade transform do elemento, usando funções diferentes, como escala, inclinação ou matriz. Por exemplo, você pode usar o código a seguir para escalar um elemento para cima e para baixo a cada 4 segundos:

.scale {
  animation: scale 4s infinite;
}
@keyframes scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
}        

6 Como combinar várias animações em um elemento com animações CSS3?

Uma das vantagens das animações CSS3 é que você pode combinar várias animações em um elemento, criando efeitos mais complexos e interessantes. Para fazer isso, você precisa usar a propriedade animation com vários valores, separados por vírgulas. Cada valor corresponde a uma animação diferente e você pode especificar o nome, a duração, o tempo e outros parâmetros para cada um. Por exemplo, você pode usar o código a seguir para combinar um fade, um slide e uma animação de rotação em um elemento:

.combo {
  animation: fade 3s infinite, slide 2s infinite, rotate 1s infinite;
}
@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}