Ninguém precisa mais de svg/gif para animações simples agora! - Animação de loading com CSS puro! [tutorial]

TL;DR clique aqui

Pra exemplificar esse recurso vamos fazer uma animação de loading. E é bem simples:

Primeiro no HTML basta criar uma div pra representar a animação:

   <div id="loading"></div>

Depois o resto tudo é no CSS!

Vamos começar definindo o tamanho da animação (use o tamanho e unidade que achar melhor):

    #loading {
        height: 35px;
        width: 35px;
    }

Depois, para ser a "rodinha" do símbolo é bem intuitivo: definir uma borda!

E para deixar redondo, basta definir um border-radius:

   #loading {
       border: 10px solid #e5e5e5;
       border-radius: 100%
   }

E para terminar o símbolo basta definir a cor da parte de cima da borda:

    #loading {
        border-top-color: #51d4db;
    }

Ok, agora devemos ter algo tipo assim:

Codepen

Agora falta só animar a animação:

Pra isso vamos usar o @keyframes e o animation no CSS.

Podemos usar tanto 0% e 100%, quanto from e to A diferença é que com porcentagem podemos setar mais frames além do inicial e do final. O código para girar o loading é bem simples e fica assim:

Basta criar um @keyframes com o nome que quiser (coloquei carinhosamente naoeomeupc aqui, porque o meu pc não roda) e usar transform para literalmente "transformar" o elemento e rotate para rotacionar.

    @keyframes naoeomeupc{
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

Note que o bloco de 0% não altera nada, por isso poderia ter sido omitido.

Agora é só aplicar a animação lá no #loading:

O código todo lá ficou assim:

    #loading {
      border: 10px solid #e5e5e5;
      height: 35px;
      width: 35px;
      border-top-color: #51d4db;
      border-radius: 100%;
      animation: naoeomeupc 1s infinite;
    }

Simplesmente usa-se animation seguido do tempo de duração da animação e infinite para ela acontecer eternamente.

Outro atributo útil é o `linear` caso queira que a velocidade seja igual
o tempo todo ou o `cubic-bezier(0, 0, 0, 0);` caso você mesmo queira definir
a velocidade em até quatro pontos!
Por padrão, a animação começa devagar, acelera e termina devagar de novo.

E tudo pronto!

O código completo deve ter ficado assim: CodePen

HTML:

    <div id="loading"></div>

CSS:

    #loading {
      border: 10px solid #e5e5e5;
      height: 35px;
      width: 35px;
      border-top-color: #51d4db;
      border-radius: 100%;
      animation: naoeomeupc 1s infinite;
    }

    @keyframes naoeomeupc {
      100% {
        transform: rotate(360deg);
      }
    }

E só com isso você conseguiu fazer uma animação de loading!

Agora pensa no leque de possibilidades que isso abre pra implementar várias outras animações totalmente personalizáveis de maneira simples e prática!

Você acha que vale mais a pena do que os gifs, svg, etc...?