Animacje CSS: transition vs transform

Tworzenie animacji na stronie internetowej przy pomocy stylów css to już norma. Ciekawe efekty można osiągnąć przy pomocy różnych sztuczek i nie trzeba do tego używać javascript. Warto jednak zauważyć, że animacje te można tworzyć na kilka różnych sposób, najprościej używając stylu css transition co niekoniecznie będzie najlepszy rozwiązaniem! Przykład poniżej.

 

Transition

Ewidentnie widać jak animacja wysuwającego się panelu przycina się. Kod odpowiedzialny za animację jest dosyć prosty:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.report-info-panel {
  ...
  width: 25%;
  position: absolute;
  right: 0px;
  top: 162px;

  transition-property: right;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.hidden {
  right: -25%;
}

Transition zmienia wartość stylu right na -25% gdy panel otrzyma klasę css .hidden. Animacja trwa jedną sekundę z interpolacją cubic-bezier.

Property transition przekłada całą, masywną pracę do przeliczania pozycji elementu względem DOM i odrysowywania każdej klatki animacji na CPU przez co widać jak element się tnie podczas ruchu.

 
Na powyższej analizie widać, że większość mocy obliczeniowej CPU poszło na transformację elementów DOM (kolor fioletowy), a o wiele mniej jest wykorzystywany GPU do renderingu. Widać także, jak rośnie stos wraz z zakończeniem animacji, gdzie odbywa się interpolacja.

 

Transform

Zmieniając style css z powyższego przykładu na transformację translate:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.report-info-panel {
  ...
  width: 25%;
  position: absolute;
  right: 0px;
  top: 162px;

  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.hidden {
  transform: translateX(100%);
}

można zauważyć ogromną różnicę w płynności animacji.

 
Animacja działa teraz płynnie ponieważ większość obliczeń została przełożona na GPU i odrysowywanie elementu, a nie przeliczanie drzewa DOM. Funkcja translate powoduje, że przeglądarka tworzy oddzielną warstwę dla animowanego elementu przez co reszta dokumentu nie jest modyfikowana.

 
Tutaj animacją zajął się procesor graficzny (kolor zielony), stos również pozostaje niemalże bez zmian przez cały czas animacji.

 

Podsumowanie

Animacje wykonywane za pomocą transition są obliczane przez CPU modyfikując całe drzewo elementów. Ten sposób jest dobry, gdy na stronie nie mamy zbyt wielu elementów html lub gdy animacja ma zostać wykonana tylko raz.

Jeśli jednak mamy do czynienia z wielokrotnie animowanymi elementami, należy korzystać z transform i funkcji pomocniczych takich jak translate, scale czy rotate itp.

Posted on: Czerwiec 7, 2018

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *