Pauza i pętla animacji CSS z WAIT! Animować

Jest wiele rzeczy, które możesz zrobić z czystą animacją CSS, ale wstrzymanie i zapętlenie animacji nie jest możliwe z aktualną specyfikacją W3.

Ale za pomocą darmowego narzędzia CZEKAĆ! Animować tak naprawdę możesz tworzyć zapętlone animacje od podstaw z niestandardowe opóźnienia między każdą pętlą. Może się to wydawać przyziemnym zadaniem, ale rozwiązuje problem bólu dla wielu programistów.

Należy zauważyć, że jest wywoływana właściwość CSS opóźnienie animacji który opóźnia początek animacji CSS. Jednakże to nie wpływa na powtarzającą się animację ponieważ tylko opóźnia punkt wyjścia.

CZEKAĆ! Animować automatycznie oblicza ile przerw należy umieścić w niestandardowych klatkach kluczowych animacji utwórz dokładny czas trwania pauzy potrzebujesz między pętlami. Można to zrobić ręcznie, ale jest to bardzo skomplikowane, nie wspominając o super irytujące.

Ta aplikacja internetowa może pracować z dowolną funkcją animacji CSS3, w tym obroty i transformacje. Nie piszesz żadnych nowych właściwości CSS, ale raczej budowanie na szczycie funkcji klatek kluczowych tworzyć zatrzymuje się na podstawie wartości procentowych (od 0% do 100%) wewnątrz animacji.

Sprawdź stronę główną, aby zobaczyć kilka przykładów w akcji. Jest całkiem jasne, co możesz zrobić, a kod źródłowy jest tam, aby skopiować / wkleić do własnej pracy.

Pamiętaj, że tak jest nie pełnoprawna biblioteka. To generator tworzy kod CSS w locie na podstawie tego, czego potrzebujesz do opóźnienia animacji.

Jeśli chcesz prostszego rozwiązania poza witryną, możesz to zrobić pobierz mixin Sass. To trochę trudniejsze, ponieważ wymaga mapy Sass, więc musisz zrozumieć, jak dodać własne właściwości i poprawnie napisać składnię.

Oto przykład nazwij mixin:

 @include waitAnimate ((animationName: animName, klatki kluczowe: (0: (transformacja: skala (1), kolor tła: niebieski), 50: (transformacja: skala (2), kolor tła: zielony), 100: (transformacja : skala (3), kolor tła: czerwony)), czas trwania: 2, waitTime: 1, timingFunction: ease, iterationCount: infinite)); 

Programiści internetowi nie powinni mieć problemu z nauką lin i budowaniem ich w miksie wielokrotnego użytku. Ale początkujący programiści mogą mieć trudności z jego działaniem, stąd aplikacja internetowa.

To wszystko kod źródłowy jest dostępny za darmo na GitHub jeśli chcesz pobrać kopię lokalnie. Ale ponieważ jest to tak dziwna funkcja, nie jest to coś, czego prawdopodobnie będziesz potrzebować w wielu projektach. Dlatego CZEKAJ! Animate aplikacja internetowa powinna być więcej niż wystarczająca, aby Ci pomóc rozwiązać jednorazowy problem z opóźnianie zapętlonych animacji za pomocą czystego CSS.

To naprawdę fajny hack, który z założenia jest dość niejasny. Ale pokazuje, jak wiele można osiągnąć dzięki CSS3 i odrobinie pomysłowości.