CSS: Keyframes

0:00Część tej lekcji mówimy czyli takie zaawansowane animacje CSS.

0:05Zdecydowanie lepsze niż wcześniej omówione przejścia czyli tranzytowym KIF Reims.

0:10Definiuje się przy pomocy słowa kluczowego KIF Reims też

0:14przełożonego małpą tak samo jak wicher Quercus media Eris czy rzeczy np.

0:20w czasie i KIF Reims definiuje się poprzez

0:25tak jakby funkcja czyli poza ciałem danego frejma musimy mu jeszcze podać nazwę.

0:31Powiedzmy że to będzie nasze Animation nam albo po prostu powiedzmy.

0:38I składnia Francuzów polega na tym że mamy możliwość definiowania

0:45punktów w których ta animacja ma mieć określone wartości a wszystko pomiędzy

0:51automatycznie będą nam animowane.

0:54Czyli jeśli tutaj wstawić np.

0:55from to jest słowo kluczowe i powiedzmy zrobimy sobie.

1:02Na.

1:04To sześć to jest domyślne szerokość tego koła i damy sobie tu.

1:12Powiedzmy 12 rozmów to już koło to nie będzie.

1:16No to faktycznie animacja będzie zaczynała

1:20się od takiej wartości i będzie to końcowa wartość.

1:23Te dwanaście rozmów a wszystko pomiędzy

1:25CSS sam sobie zajmuje to jest tylko jedna składnia zaraz mówiłem też inne.

1:30No ale żeby aplikować animację to tutaj

1:32już jest troszkę więcej właściwości do których mamy dostęp.

1:36Animation ma np.

1:38na sobie takie właściwości jak Animation Time Ink Faction.

1:42Czyli to jest to samo co mówiliśmy

1:44wcześniej w kontekście kobiet czy funkcji liniowych czy internautów.

1:49Mamy też do dyspozycji rejon mamy czyli to

1:53co tutaj sobie zadeklarowali my jako Polska.

1:56Czy możemy sobie wpisać od razu Puls Animation Creation.

2:02Możemy sobie wpisać na powiedzmy

2:05może troszkę dłuższy dom bo tutaj

2:07szerokość a nie czujemy to na pewno nie poniżej sekundy.

2:11Animation Time Ink Faction ustawiamy na liniową.

2:14No i spróbujmy sobie aplikować zobaczymy czy coś się stanie i faktycznie to się

2:18rozciągają ale tutaj warto zauważyć że to się rozciągają tylko jednorazowo.

2:25Co prawda stało się to automatycznie.

2:28Tam wcześniej straży musieliśmy zrobić sobie na przykład pseudo klasę Hoover żeby

2:32to faktycznie Street zerowej czyli uruchomić.

2:35No ale możemy to zrobić również ręcznie czyli np.

2:39Animation.

2:42Play station i tutaj możemy dać ranking.

2:45No to generalnie ona się uruchomi na początku i później w przerwie.

2:50A aby się nie przegrywała no to możemy użyć Animation w filmach od.

2:56Jeżeli piszemy tutaj bow.

3:00Bez refleksu.

3:02No to ta funkcja powinna nam się zatrzymać na tym końcowym etapie czyli

3:09aby zatrzymać element w końcowym stadium jego animacji możemy dać Animation Files.

3:16Możemy też sprawdzić jak zachowają się z innymi wartościami tutaj

3:21powiedzmy Fort Worth.

3:25Jest dokładnie to samo back WORD.

3:34Przeskakuje nam i generalnie Bow jest to alias na back Worth i WORD na raz.

3:41Czyli generalnie animacja będzie działać w

3:43obie strony niezależnie od tego na jakim jesteśmy etapie czyli tak

3:48naprawdę później miałoby się to nam od czasu do from.

3:51Jeżeli damy sobie na przykład back back Word czy Bow no i aby zwiększyć ilość tych

3:59animacji no bo ona się obecnie wywołuje tylko raz możemy zrobić Animation

4:05Nation Kant czyli ilość interakcji to też pętla.

4:10Wspominaliśmy i tutaj możemy wpisać po prostu sobie liczbę powiedzmy 3.

4:15Ja się tutaj będzie rozciągać trzykrotnie możemy dać sobie internet.

4:23I teraz będzie non stop tak skakała.

4:26Zobaczymy jak to się stanie jeżeli damy.

4:32I dalej generalnie mamy ten przeskok.

4:35Zobaczmy jakie są jeszcze dostępne.

4:39Opcję Wyłącz telefon żeby to na mnie skakało Animation.

4:44Zobaczmy rejon dalej no to dalej tam opuści opóźni daną

4:49animację tak aby właśnie później o tyle ile tutaj zadeklaruje.

4:55Animation direction.

4:58To możemy faktycznie zdefiniować w którym

5:01kierunku ta animacja ma się odbywać co się czasami faktycznie przydaje.

5:04Jeżeli mamy jedną animację która ma się wywoływać w różnych kierunkach.

5:08Jeśli na przykład ktoś dodał coś do

5:10koszyka i my robimy animację taką że przechodzi element z punktu A do punktu B

5:16ale później ktoś zdecyduje że element koszyka jednak nie jest mu potrzebny.

5:20No i ten element będzie musiał się cofnąć na to samo miejsce z którego

5:25możemy takie weekendowe rzeczy oczywiście tutaj robić.

5:29Więc w taki sposób możemy tę animację manipulować.

5:32I tutaj oczywiście jeżeli nie zrobimy czegoś takiego że.

5:38Ta animacja będzie nam wracała do punktu

5:40początkowego no to będziemy mieli tutaj taki charakterystyczny przeskok.

5:44To co można też zrobić to zadeklarować procentowo jakby punkty

5:52danych wartości dla tej animacji 30 ustawiamy sobie 0 proc.

5:57i tutaj 100 proc.

5:58no to jest tak naprawdę ekwiwalent tego co już sobie napisaliśmy.

6:02Ale jeśli zrobimy ponownie.

6:06Tutaj do stu procent.

6:10Sześć remisów i zmienimy ten punkt na 50 proc.

6:15to otrzymamy efekt takiego zmierzającego się i.

6:20Rozciągające się kółka czyli możemy sobie włączyć tutaj to na internet ponownie.

6:25I kółko będzie nam się robiło.

6:27Co ciekawe możemy też zrobić tutaj

6:29Animation Bailey i ustawić sobie na pół sekundy powiedzmy.

6:36I warto zauważyć że ten Animation dalej

6:40jak sobie zwiększymy troszkę tę wartość powiedzmy na sekundę.

6:46To on faktycznie czeka na dwie sekundy ale

6:49po tym jak on już ruszy no to już nie ma tego dialogu czyli

6:53pomiędzy i operacjami tego pulsu już nie ma.

6:56To jest początkowy opóźnienie tej naszej animacji i to co np.

7:01w czasie często robi to można sobie stworzyć miks który będzie dynamicznie nam

7:05ustawiał nazwę tej animacji i będziemy mogli jego zasięg

7:10budować po prostu podając dynamicznie różne wartości dla różnych animacji.

7:16Niemcy są z natury bardzo wydajne ponieważ

7:19jest to animacja przy użyciu CSS a nie operacji na drzewie dom

7:27czy przy pomocy drzewa skryptu i set Time Out czy set internautów więc

7:34generalnie jeżeli możemy na to używamy oczywiście CSS Animation

7:38czyli albo tranzystory albo Francuzów a wsparcie dla obu tych właściwości jest już

7:44na tyle dobre że spokojnie możecie z nich korzystać.

7:47Ale warto pamiętać że niektóre właściwości po prostu nie powinny być animowane np.

7:53animowane.

7:54No tutaj może być problem w zależności od tego jak ten element jest pozycjonowanie i

7:59czy jest w głównym drzewie dom i czy jego rozmiar będzie wpływał na inne elementy i

8:04na ich generowanie albo na przykład czy będziemy to pozycjonowanie.

8:08Absolutnie.

8:09Czyli jeśli byśmy sobie zrobili pozycję absolutnie.

8:15I chcielibyśmy animowany sobie jego left.

8:20Za pomocą tejże animacji.

8:25To faktycznie będzie to mniej wydajne niż

8:28jeśli Użyliśmy do tego innej właściwości aby przesunąć ten element.

8:34Będę o tym mówił troszkę więcej.

8:37W dziale poświęconym wydajności ale tutaj warto po prostu pamiętać że

8:42oczywiście jest Short Hunt do tworzenia animacji tak samo jak było z szyn.

8:47Natomiast jest tutaj tych właściwości więcej niż w stosunku do tranzytowym.

8:51Dlatego ja lubię po prostu rozbijać sobie to na pojedyncze wartości żeby móc to

8:56pamiętać i w samych remisach też warto pamiętać że nie musimy.

9:01Operować tylko i wyłącznie na wartościach

9:04from tu tylko możemy podać wartość procentową i tak naprawdę dowolną ilość

9:08kroków jaką chcemy aby ta animacja wykonywała w kolejnej lekcji o troszkę

9:15bardziej Animation Time ING Faction i konkretnie KBC wizjer.

9:19Jak go można edytować i jakie fajne efekty można dzięki niemu uzyskać.