Animações básicas com CSS e SVG

SVG e sua estrutura

Um SVG é composto por paths

Cada path representa um elemento do SVG

Podemos criar grupos com esses elementos, representando uma parte do SVG

E, por fim, podemos animar essas partes de maneira separada :)

Agrupando e lendo um SVG

1) Abra o SVG no navegador e em um editor

2) Identifique os paths que pretende agrupar

3) Adicione esses paths dentro de um <g></g>

4) Adicione id ou classe para esse <g></g>

Obs: você pode encontrar alguns svgs aqui: https://undraw.co/illustrations

5) Crie as animações para esse id ou classe :)

Animações com CSS no SVG

É possível animar os elementos do SVG da mesma forma que faríamos com elementos do HTML

Podemos usar a propriedade animation para criar a animação. Ela trabalha com @keyframes para definir o comportamento e transform para transformá-la

Propriedade animation

.container {
  animation: my-animation 10s 2s linear infinite;
}

Classe a ser animada

Nome da animação

Duração da animação

Delay para iniciar a animação

Como deve ser executada

Quantas vezes deve ser executada

Keyframes - o que são?

Permite controlar os frames da sua animação

Com @keyframes do CSS, podemos definir fases para a animação, com valor inicial e final

Com isso, podemos controlar as características da animação em casa fase, transformando-a conforme necessário

Keyframes - opção 1

@keyframes my-animation {
 from {
  transform: rotateZ(0deg);
 }
 to {
  transform: rotateZ(360deg);
 }
}

Estado/fase inicial

A qual animação se refere

Estado/fase final

Transformação no estado inicial

Transformação no estado final

Keyframes - opção 2

@keyframes my-animation {
 0% {
  transform: rotateZ(0deg);
 }
 100% {
  transform: rotateZ(360deg);
 }
}

Estado/fase inicial

A qual animação se refere

Estado/fase final

Transformação no estado inicial

Transformação no estado final

Exemplo 1

<div class="container" />

<style>
  .container {
    width: 100px;
    height: 100px;
    background-color: violet;
    animation: my-animation 3s linear infinite;
  }

  @keyframes my-animation {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(360deg);
    }
  }
</style>

Exemplo 2

<div class="container" />

<style>
  .container {
    width: 50px;
    height: 50px;
    animation: my-animation 5s linear infinite alternate;
  }

  @keyframes my-animation {
    from {
      transform: rotateZ(0deg);
      border-radius: 5%;
      box-shadow: 0 0 0 10px slateblue;
      background-color: violet;
    }
    to {
      transform: rotateZ(360deg);
      border-radius: 50%;
      box-shadow: 50px 50px 0 10px violet;
      background-color: slateblue;
    }
  }
</style>

<div class="container" />

<style>
  .container {
    width: 50px;
    height: 50px;
    animation: my-animation 3s 2s linear infinite alternate;
  }
  @keyframes my-animation {
    0% {
      transform: translate(0px, 0px) rotate(0);
      border-radius: 5%;
      box-shadow: 50px 50px 0 10px pink;
      background-color: slateblue;
    }
    50% {
      transform: translate(40px, 40px) rotate(0);
      border-radius: 20%;
      box-shadow: -50px -50px 0 10px violet;
      background-color: violet;
    }
    100% {
      transform: translate(100px, 100px) rotate(180deg);
      border-radius: 100%;
      box-shadow: 0 0 0 10px slateblue;
      background-color: pink;
    }
  }
</style>