| wartość początkowa | 0s |
|---|---|
| Dotyczy | wszystkie elementy, ::przed i ::po pseudoelementach |
| Dziedziczny | nie |
| głoska bezdźwięczna | wizualny |
| Obliczona wartość | jak określono |
| Typ animacji | oddzielny |
| porządek kanoniczny | unikalny niedwuznaczny porządek określony przez gramatykę formalną |
Kompatybilność z przeglądarką
Tabela zgodności na tej stronie jest generowana na podstawie uporządkowanych danych. Jeśli chcesz wnieść swój wkład w dane, wejdź na https://github.com/mdn/browser-compat-data i wyślij nam pull request.
Zaktualizuj dane zgodności na GitHub
| Pulpit | mobilny | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrom | Brzeg | Firefox | Internet Explorer | Opera | safari | widok na Androida | Chrome na Androida | Firefox dla Androida | Opera na Androida | Safari na iOS | Samsung Internet | |
| Opóźnienie animacji | Chrome Pełne wsparcie 43 Pełne wsparcie 43 Pełne wsparcie 3 Prefiks Prefiks | Krawędź Pełne wsparcie 12 | Firefox Pełna obsługa 16 notatki Pełne wsparcie 16notatki notatki Przed Firefoksem 57, Firefox nie odmalować elementy poza rzutnią, które są animowane w rzutni z opóźnieniem. Ten błąd dotyczy tylko niektórych platform, takich jak Windows. Pełne wsparcie 49Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -webkit- Pełne wsparcie 44Prefiks Wyłączone Prefiks Zaimplementowane z prefiksem dostawcy: -webkit- Wyłączone Od wersji 44: ta funkcja znajduje się za preferencją layout.css.prefixes.webkit (musi być ustawiona na true). Aby zmienić preferencje w Firefoksie, odwiedź about:config. Pełne wsparcie 5Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -moz- | IE Pełne wsparcie 10 | Opera Pełne wsparcie 30 Pełne wsparcie 30 Pełne wsparcie 15 Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -webkit- Brak wsparcia 12.1 - 15 Brak wsparcia 12 - 15Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -o- | Safari Pełne wsparcie 9 Pełne wsparcie 9 Pełne wsparcie 4 Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -webkit- | WebView Android Pełne wsparcie 43 Pełne wsparcie 43 Pełne wsparcie ≤37 Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -webkit- | Chrome Android Pełne wsparcie 43 Pełne wsparcie 43 Pełne wsparcie 18 Prefiks Prefiks Zaimplementowane z prefiksem dostawcy: -webkit- | Firefox Android Pełne wsparcie 16 Pełne wsparcie 16 Pełne wsparcie 49 | |||
Animacja CSS nie musi zaczynać się natychmiast po zainicjowaniu. Możesz kontrolować, kiedy zaczyna się od właściwości transition-delay. Aby opóźnić przejście o określony czas, określ je w wartości właściwości:
Opóźnienie przejścia: 1s; /* opóźnienie rozpoczęcia animacji o sekundę */
Ta właściwość jest mało przydatna przy wdrażaniu prostej interaktywności w witrynie, ale może być bardzo przydatna, jeśli trzeba tworzyć bardziej złożone efekty. Analogicznie do czasu trwania przejścia, możesz zapisać czas opóźnienia dla każdej właściwości określonej we właściwości przejścia (ważne jest również przestrzeganie kolejności wyliczania):
Właściwość przejścia: kolor, kolor tła, odstępy między literami; czas przejścia: 1s, .5s, 2s opóźnienie przejścia: 0s, 0s, 2s /* opóźnienie animacji odstępów między literami o 2 sekundy */
Nie zapomnij o kompatybilności z różnymi przeglądarkami - absolutnie wszystkie właściwości rodziny przemiana wymagają użycia przedrostków dostawcy:
opóźnienie przejścia webkitu: 1s; -moz-transition-delay: 1s; -o-opóźnienie-przejścia: 1s; opóźnienie przejścia: 1s;
Praktyczne użycie
W praktyce właściwość transition-delay jest często używana podczas tworzenia menu rozwijanych, które rozwijają się po najechaniu myszą. W tym przypadku jest napisany nie tylko dla stanu początkowego, ale także dla stanu końcowego.
Być może zauważyłeś, że na niektórych stronach menu rozwijane znikają zbyt szybko, co utrudnia złapanie pożądany link i kliknij na niego. Właściwość transition-delay, ustawiona na zwykłym elemencie i elemencie z pseudo-class:hover , pomaga zapobiegać takiemu zachowaniu. Wartości będą się różnić: dla stanu normalnego właściwość przejścia-delay musi być ustawiona na wartość większą od zera, a dla stanu najechania musi być ustawiona na 0. Przykład:
Submenu ( krycie: 0; właściwość przejścia: wszystkie; czas trwania przejścia: .5s; opóźnienie przejścia: 1s; ) .menu:hover .submenu ( krycie: 1; opóźnienie-przejścia: 0s; )
Ten kod spowoduje, że menu pojawi się po najechaniu kursorem bez opóźnienia, a zniknięcie zostanie opóźnione o jedną sekundę. Ta sztuczka z pewnością sprawi, że menu będzie bardziej przyjazne dla użytkownika.
Właściwość animation-delay ustawia czas oczekiwania przed rozpoczęciem pętli animacji. Wartość 0s lub 0ms natychmiast uruchamia animację. Wartość ujemna również włącza animację bez opóźnienia, ale może zmienić wygląd początku animacji.
Dopuszczalne jest podanie wielu wartości poprzez wymienienie ich oddzielonych przecinkami.
krótka informacja
Składnia
opóźnienie animacji:<время> [,<время>]*
Notacja
| Opis | Przykład | |
|---|---|---|
| <тип> | Określa typ wartości. | <размер> |
| A&B | Wartości muszą być wyprowadzane w określonej kolejności. | <размер> && <цвет> |
| | B | Wskazuje, że należy wybrać tylko jedną z sugerowanych wartości (A lub B). | normalny | kapitaliki |
| || B | Każda wartość może być używana samodzielnie lub w połączeniu z innymi w dowolnej kolejności. | szerokość || liczyć |
| Grupuje wartości. | [ przytnij || krzyż] | |
| * | Powtórz zero lub więcej razy. | [,<время>]* |
| + | Powtórz raz lub więcej razy. | <число>+ |
| ? | Podany typ, słowo lub grupa są opcjonalne. | wstawka? |
| (A, B) | Powtórz co najmniej A, ale nie więcej niż B razy. | <радиус>{1,4} |
| # | Powtórz raz lub więcej razy oddzielone przecinkami. | <время># |
Przykład
Model obiektowy
Obiekt.styl.opóźnienie animacji
Notatka
Chrome, Safari i Android obsługują właściwość -webkit-animation-delay.
Opera przed wersją 12.10 obsługuje właściwość -o-animation-delay.
Firefox przed wersją 16 obsługuje właściwość -moz-animation-delay.
Specyfikacja
Każda specyfikacja przechodzi kilka etapów akceptacji.
- Rekomendacja (rekomendacja) - specyfikacja jest zatwierdzona przez W3C i rekomendowana jako standard.
- Rekomendacja kandydata ( Możliwe zalecenie) - grupa odpowiedzialna za standard jest przekonana, że spełnia swoje cele, ale do wdrożenia standardu wymagane jest wsparcie społeczności programistów.
- Proponowane zalecenie ( Sugerowana rekomendacja) - na tym etapie dokument jest przekazywany do Rady Doradczej W3C do ostatecznego zatwierdzenia.
- Roboczy projekt — bardziej dojrzały projekt po dyskusji i poprawkach do przeglądu przez społeczność.
- Wersja robocza redaktora ( Wersja redakcyjna) jest wersją roboczą normy po wprowadzeniu zmian przez redaktorów projektu.
- projekt ( Projekt specyfikacji) to pierwsza wersja robocza normy.
Przeglądarki
Przeglądarki
W tabeli przeglądarki używany jest następujący zapis.
Powtarzane opóźnienie animacji CSS (5)
Oto krótki fragment, który pokazuje to samo w 75% przypadków, a potem się wsuwa. Ten powtarzający się wzór dobrze emuluje opóźnienia:
@-webkit-klatki kluczowe slajd ( 0% (pozycja w tle: 0 0;) 25% (pozycja w tle: 0 0;) 50% (pozycja w tle: 0 0;) 75% (pozycja w tle: 0 0; ) 100% (pozycja w tle: 13em 0;) ) slajd @-moz-klatki kluczowe ( 0% (pozycja w tle: 0 0;) 25% (pozycja w tle: 0 0;) 50% (pozycja w tle: 0 0;) 75% (pozycja w tle: 0 0;) 100% (pozycja w tle: 13em 0;) ) slajd @klatek kluczowych ( 0% (pozycja w tle: 0 0;) 25% (pozycja w tle: 0 0 ;) 50% (pozycja w tle: 0 0;) 75% (pozycja w tle: 0 0;) 100% (pozycja w tle: 13em 0;)) )
Niedawno odkryłem, jak "poprawnie" używać animacji CSS (wcześniej odrzucałem je jako niezdolne do tworzenia złożonych sekwencji, jak w JavaScript). Więc teraz się o nich uczę.
Aby uzyskać ten efekt, staram się, aby „rozbłysk” gradientu obejmował element podobny do postępu. Podobny do efektu na natywnych paskach postępu systemu Windows Vista/7.
@keyframes barshine ( od (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) do (tło -image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25)105%,rgba(255,255,255,0) 110%);) ) .progbar (animacja: barshine 1s 4s liniowa nieskończoność; )
Jak widać, próbuję uzyskać 4 sekundowe opóźnienie, a następnie 1 sekundowy blask, powtarzając.
Wygląda jednak na to, że opóźnienie animacji dotyczy tylko pierwszej iteracji, po której blask po prostu się kołysze.
„Rozwiązałem” to pytanie w następujący sposób:
@keyframes expbarshine ( from (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) 80% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);) do (background-image:linear-gradient (120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);) ) .progbar ( animacja: barshine 5s linear nieskończoność; )
from i 80% są dokładnie takie same, co skutkuje „opóźnieniem” wynoszącym 80% długości animacji.
To działa, ale dla mojej następnej animacji potrzebuję, aby opóźnienie było zmienne (stałe dla określonego elementu, ale zmienne między elementami korzystającymi z animacji), podczas gdy sama animacja pozostaje tej samej długości.
W przypadku powyższego „rozwiązania” kończę z wolniejszą animacją, gdy wszystko, czego chcę, to dłuższe opóźnienie.
Czy można zastosować opóźnienie animacji do wszystkich iteracji, nie tylko do pierwszej?
minitech ma rację, że animacja-delay określa opóźnienie przed rozpoczęciem animacji i NIE opóźnienie między iteracjami. Edytor szkicu specyfikacji dobrze to opisuje i odbyła się dyskusja na temat tej funkcji, którą opisujesz, która oferuje tę funkcję opóźnienia iteracji.
Chociaż w JS może istnieć obejście tego problemu, możesz sfałszować to iteracyjne opóźnienie migania paska postępu, używając tylko CSS.
Deklarując pozycję podziału palnika position:absolute i overflow: hidden dla nadrzędnego div's overflow: hidden , ustawiając stan 100 procent klatki kluczowej na większy niż szerokość paska postępu i bawiąc się funkcją czasu sześciennego beziera i przesunięciem wartości po lewej stronie, można emulować tryb łagodzenia światła -in-out lub czas liniowy z "opóźnieniem".
Ciekawe byłoby napisanie domieszki o rozmiarze mniejszym/scss, aby dokładnie obliczyć lewy offset i funkcję czasu, aby uzyskać to dokładnie, ale nie mam teraz czasu na zabawę. Chciałbym zobaczyć coś takiego!
Oto demo, które stworzyłem, aby to pokazać. (Próbowałem naśladować wskaźnik Środowisko wykonawcze Windows 7 i trochę spadł, ale to pokazuje, o czym mówię)
/* CSS */ Postęp @keyframes ( od ( width: 0px; ) do ( width: 600px; ) ) @keyframes barshine ( 0% ( left: -100px; ) 100% ( left: 1000px; ) ) .flare ( animacja -name: barshine; czas trwania animacji: 3 s; kierunek animacji: normalny; tryb wypełniania animacji: do przodu; funkcja czasu animacji: sześcienny-bezier (.14, .75, .2, 1,01); iteracja animacji -count: nieskończona; lewa: 0; góra: 0; wysokość: 40px; szerokość: 100px; pozycja: bezwzględna; tło: -moz-radial-gradient(środek, okładka elipsy, rgba(255,255,255,0.69) 0%, rgba( 255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)) , color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(środek, okładka w kształcie elipsy, rgba(255,255,255,0.69) 0%,rgba(255,255,255 ,0) 87%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(centrum, pokrycie elipsy, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /*O pera 12+ */ background: -ms-radial-gradient(środek, pokrycie elipsy, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ background: radial-gradient(elipsa w środku, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* Awaria IE6-9 na gradiencie poziomym */ z-index: 10; ) .progress ( nazwa animacji: progress; czas trwania animacji: 10 s; opóźnienie animacji: 1 s; funkcja synchronizacji czasu animacji: linear; liczba iteracji animacji: nieskończona; przepełnienie: ukryte; pozycja: względna; indeks z: 1; wysokość: 100%; szerokość: 100%; border-right: 1px solid #0f9116; background: #caf7ce; /* Stare przeglądarki */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color- stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ tło: -o-linear-gradient(u góry, #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ background: -ms-linear-gradient(góra, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% ); /* IE10+ */ background: linear-gradient(do dołu, #caf7ce 0%,#caf7ce 18%,#3fe81e 4 5%,#2ab22a 96%); /* W3C */ filtr: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ ).progress:after ( content: ""; szerokość: 100%; wysokość: 29px; prawo: 0; dół: 0; pozycja: bezwzględna; z-index: 3; tło: -moz- linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, lewa góra, prawa góra, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(po lewej , rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(202,247,206,0) 0 %,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100 %); /* IE10+ */ background: linear-gradient(do prawej, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft .gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ ) .bar (górny margines: 30px; wysokość: 40px; szerokość: 600px; pozycja pozycja: względna; obramowanie: 1px stałe #777; promień obramowania: 3px )
Miałem podobny problem i używałem
@-webkit-keyframes pan ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ; ) )
To trochę denerwujące, że musisz sfałszować swój czas trwania, aby uwzględnić „opóźnienia” z obu końców.
To właśnie musisz zrobić. Powinno działać tak, aby mieć 1-sekundową animację, a następnie 4-sekundowe opóźnienie między iteracjami:
@keyframes barshine ( 0% ( background-image:linear-gradient(120deg,rgba(255,255,255,0)) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); ) 20% ( background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25)105%,rgba(255,255,255,0) 110%);) ) .progbar (animacja: barshine 5s 0s liniowa nieskończoność ; )
Więc dużo się tym zajmowałem i możesz to zrobić bez zbytniego hackingu. To najprostszy sposób na ustawienie opóźnienia między iteracjami animacji: 1. SUPER EASY i 2. wymaga tylko trochę logiki. Sprawdź tę animację taneczną, którą wykonałem:
Dance( nazwa-animacji: dance; -webkit-nazwa-animacji: dance; liczba-iteracji-animacji: nieskończona; -liczba-iteracji-webkit-animacja: nieskończona; czas trwania animacji: 2,5s; -czas trwania-animacji-webkit: 2,5 s; -webkit-animation-delay: 2,5s; animacja-delay: 2,5s; funkcja synchronizacji czasu animacji: złagodzenie; -webkit-animation-funkcja czasu: złagodzenie; ) @keyframes dance (0% ( -webkit-transform: obrót (0deg); -moz-transform: obrót (0deg); -o-transform: obrót (0deg); -ms-transform: obrót (0deg); transform: obrót (0deg); ) 25 % ( -webkit-transform: obrót (-120 stopni); -moz-transform: obrót (-120 stopni); -o-transform: obrót (-120 stopni); -ms-transform: obrót (-120 stopni); transform: obrót ( -120deg); ) 50% ( -webkit-transform: obrót (20deg); -moz-transform: obrót (20deg); -o-transform: obrót (20deg); -ms-transform: obrót (20deg); transform: obracać (20 stopni); ) 100% ( -webkit-transform: obracać (0 stopni); -moz-transform: obracać (0 stopni); -o-transform: obracać (0 stopni); -ms-transform: obracać (0 stopni); transformacja: obróć (0deg); ) ) @-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); ); przekształcenie: obrót (0 stopni); ) 20% ( -webkit-transform: obrót (20 stopni); -moz-transform: obrót (20 stopni); -o-transform: obrót (20 stopni); -ms-transform: obrót ( 20deg); transformacja: obrót (20deg); ) 40% ( -webkit-transform: obrót (-120deg); -moz-transform: obrót (-120deg); -o-transform: obrót (-120deg); -ms- przekształcenie: obrót (-120 stopni); przekształcenie: obrót (-120 stopni); ) 60% ( -webkit-transform: obrót (0 stopni); -moz-transform: obrót (0 stopni); -o-transform: obrót (0 stopni); -ms-transform: obrót (0 stopni); transform: obrót (0 stopni); ) 80% ( -webkit-transform: obrót (-120 stopni); -moz-transform: obrót (-120 stopni); -o-transform: obrót ( -120deg); -ms-transform: obrót (-120deg); transform: obrót (-120deg); ) 95% ( -webkit-transform: obrót (20deg); -moz-transform: obrót (20deg); -o- przekształcenie: obrót (20 stopni);-ms-transformacja: obrót (20 stopni); przekształć: obróć (20 stopni); ) )
Właściwie przyszedłem tutaj, próbując wymyślić, jak opóźnić animację, kiedy zorientowałem się, że po prostu 1. wydłużasz czas trwania animacji i zyskujesz proporcję czasu dla każdej animacji. Beore miałem je co 0,5 sekundy przez łączny czas trwania 2,5 sekundy. Teraz powiedzmy, że chciałem dodać opóźnienie równe całkowitemu czasowi trwania, więc opóźnienie wynosi 2,5 sekundy.
Czas animacji wynosi 2,5 sekundy, a opóźnienie wynosi 2,5, więc zmieniasz czas trwania na 5 sekund. Jednak ponieważ podwoiłeś całkowity czas trwania, musisz zmniejszyć o połowę część animacji. Sprawdź najnowsze poniżej. To działało dla mnie świetnie.
@-webkit-keyframes dance ( 0% ( -webkit-transform: obrót (0deg); -moz-transform: obrót (0deg); -o-transform: obrót (0deg); -ms-transform: obrót (0deg); przekształcenie: obrót (0 stopni); ) 10% ( -webkit-transform: obrót (20 stopni); -moz-transform: obrót (20 stopni); -o-transform: obrót (20 stopni); -ms-transform: obrót (20 stopni) ; transform: obrót(20deg); ) 20% ( -webkit-transform: obrót(-120deg); -moz-transform: obrót(-120deg); -o-transform: obrót(-120deg); -ms-transform: obrót (-120 stopni); transformacja: obrót (-120 stopni); ) 30% ( -webkit-transform: obrót (0 stopni); -moz-transform: obrót (0 stopni); -o-transform: obrót (0 stopni); -ms -transform: obrót (0 stopni); transform: obrót (0 stopni); ) 40% ( -webkit-transform: obrót (-120 stopni); -moz-transform: obrót (-120 stopni); -o-transform: obrót (-120 stopni); ); -ms-transform: obrót (-120 stopni); transform: obrót (-120 stopni); ) 50% ( -webkit-transform: obrót (0 stopni); -moz-transform: obrót (0 stopni); -o-transform: obracać (0 stopni); -ms-transform: obracać (0 stopni); transfo rm: obróć (0 stopni); ) )
To są twoje obliczenia, których prawdopodobnie używasz, aby dowiedzieć się, jak zmienić czas trwania animacji i % każdej części.
czas_życzenia = x
wish_duration = animacja_part_duration1 + animacja_part_duration2 + ... (i tak dalej)
całkowity czas trwania = x + y
animacja_part_duration1_actual = animacja_part_duration1 * czas trwania_życzeń / całkowity_czas trwania
Zrobiłem plakat na ścianie, który porusza się w lewo iw prawo w odstępach. U mnie to działa:
Div-animation ( -webkit-animation: zwolnienie 2000 ms odbicia; -moz-animation: zwolnienie 2000 ms odbicia; -o-animation: zwolnienie 2000 ms odbicia; animacja: nieskończone zwolnienie 2000 ms odbicia; -animacja webkit -delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; ) @-webkit-keyframes bounce ( 0% ( transform: rotate(0deg); ) 3% ( transformacja: obrót (1 stopnie); ) 6% ( transformacja: obrót (2 stopnie); ) 9% ( transformacja: obrót (3 stopnie); ) 12% ( transformacja: obrót (2 stopnie); ) 15% ( transformacja: obrót (1 stopnie) ); ) 18% ( transformacja: obrót (0 stopni); ) 21% ( transformacja: obrót (-1 stopnie); ) 24% ( transformacja: obrót (-2 stopnie); ) 27% ( transformacja: obrót (-3 stopnie); ) 30% ( transformacja: obrót (-2 stopnie); ) 33% ( transformacja: obrót (-1 stopnie); ) 36% ( transformacja: obrót (0 stopni); ) 100% ( transformacja: obrót (0 stopni); ) )