Animacje SVG były czymś, o czym długo myślałem, ale nigdy nie robiłem na poważnie. Do wczoraj.

Kończąc ikonkę w Sketchu i eksportując ja do SVG uświadomiłem sobie, że to przecież nic innego, jak zbiór elementów, które potem wsadzę w DOM. Otworzyłem więc taki plik i wrzuciłem go tutaj.

Co dalej? Na sam początek sprawdziłem, czy w ogóle mogę dostać się z animacjami do elementów w SVG. Tak - mogę. Taki kod:

  <svg>
  <rect></rect>
</svg>

jest tak samo rozumiany przez CSS jak

  <div>
  <p></p>
</div>

Co to nam daje? Ano dużo, bo dzięki temu możemy np. ponazywać konkretne elementy klasami i odnosić się do nich w CSS. Na przykład:

  <svg>
  <rect class="text-pink" width="200" height="40"></rect>
</svg>

  .text-pink { fill: pink; }

wypełni nasz element różowym tłem.

No dobrze, więc animacje? Użyłem Compassa i stworzyłem prostą sekwencję imitującą pisanie kodu:

  @include keyframes(animate-txt) {
    0% { @include transform(scaleX(0), tranlateX(100%)); }
    100% { @include transform(scaleX(1), translateX(0)); }
}

potem dołączyłem ją do elementu:

  .text-pink  {
    @include animation(animate-txt .5s linear forwards);
}

i to wszystko - nasz prostąt się animuje.

Rozbudowaną wersję tego przykładu - zbiory elementów animowane w różnych prędkościach - zobaczycie tu:


889 0 0