CSS: Animacje za pomocą przejść

0:00W tej lekcji wracamy do klasycznego CSS a zostawiamy S CSS a za nami.

0:06Wiemy już jak z niego korzystać więc

0:08przejdźmy do innych właściwości CSS a z których możemy korzystać bez zawahania.

0:13Jest kilka możliwości animacji CSS.

0:18Przede wszystkim mamy opcje z przejściami i filmami w tej lekcji.

0:22Mówię jak robić przejścia i na czym to polega.

0:26A w następnych faktycznie przejdziemy do słów które są o wiele bardziej

0:29zaawansowanym podejściem do tworzenia animacji.

0:33Więc załóżmy że chcielibyśmy zanim obrać

0:36sobie kolor tego kółka w momencie gdy jedziemy na nie myszką.

0:40Więc klasycznie w CSS musimy zrobić osobny elektor

0:44Hoover czyli po najechać myszką.

0:48Ustawiają grunt na jakiś kolor powiedzmy na poręczy.

0:53No i poza pisaniu jeszcze tutaj kursor

0:56powinien ustawić żeby pokazywać że faktycznie coś tutaj się dzieje

1:02robi się nam tutaj łatka w kształcie kursorem.

1:06No i faktycznie mamy przejście koloru z jednego do drugiego.

1:09Przejście skokowe to znaczy nie ma tutaj żadnej transakcji.

1:12I właśnie tę transakcję możemy zdefiniować na dowolnym sektorze cesarzowej.

1:19Transakcję ustawiamy za pomocą polecenia

1:22tranzytowym i dlatego Head z którego ja teraz

1:26korzystam za chwilę omówi wszystkie pojedyncze wartości.

1:31I pierwsza wartość to jest np.

1:33czas jak długo ma trwać to przejście czyli

1:36powiedzmy trzy setne sekundy trzy dziesiąte sekundy.

1:39Następne to jest właściwość którą chcemy a więc w naszym przypadku jest to Grand.

1:47I ostatnia TO jest Time Pink Faction czyli jak ma to przejście być animowane.

1:54Z jaką krzywą.

1:56Do dyspozycji mam np.

1:58tutaj linie Air Is In i Out

2:02czy kubek wizjer które możemy też ręcznie manipulować.

2:06I o tym będziemy też mówić o osobnej lekcji.

2:08Powiedzmy że użyjemy tutaj sobie sygnału

2:10który jest na początku troszkę wolniejsze zwalnia i potem na końcu też przyśpiesza.

2:16Jak to wygląda po najechać myszką.

2:20Faktycznie widzimy że teraz jest ładne takie przejścia jeżeli sobie troszkę

2:23zwiększymy ten czas to może będzie to lepiej widać trzy sekundy.

2:27Jak jeżdżę teraz na to kółko no to widzimy

2:30że jest to przejście w taki sposób jeżeli zmienimy

2:35funkcję liniową.

2:36Jestem ciekawy czy to będzie w sumie widać na kolorze.

2:39Na pewno lepiej by to wyglądało na przesłuchaniu.

2:41Na pewno teraz ten kolor jest taki

2:43bardziej stały w swojej zmianie więc pierwszy parametr w skrócie

2:47tranzytowym to jest ile ma ta tendencja trwać.

2:50Następne to jest jakie właściwości powinny być animowane.

2:54No i ostatnia time in Faction.

2:57Co ważne jeżeli robimy animację tego typu

3:01na pseudo elementy z pseudo klasami takimi jak Hoover.

3:07Na to żeby nie ustawić tego tylko na

3:09rowerze bo jeżeli zrobimy to w ten sposób to.

3:15Cofnijmy Nasera siedem sekund.

3:19To faktycznie jest to przejście ale przy

3:21podejmowaniu kursorem myszki już tego przejścia nie będzie.

3:26W związku z czym jeżeli to jest coś na

3:27czym nam zależy na to oczywiście możemy użyć w ten sposób

3:31ale jeżeli zależy nam na przejściu w obie strony no to musimy to ustawić na tym

3:36głównym sektorze który a nie wiemy dlaczego tak się dzieje no bo generalnie w

3:42momencie kiedy Hoover nam znika no to tranzyt ten znika nam z tego elementu.

3:46Jeżeli nasz element cykl.

3:50Czyli ten.

3:53Ma na sobie Cholera no to

3:55to ta właściwość mu się aplikacje ale w momencie kiedy zjeżdża z niego myszką

4:00to ta właściwość tranzytu on również z niego znika w związku z czym mamy ten

4:05efekt skokowe przejście do poprzedniej wartości.

4:08Jeżeli chcemy bardziej z kasy zdominować naszą transakcję.

4:14Możemy użyć do tego pełnej składni

4:16polecenia czyli możemy użyć na przykład tranzystory dalej aby opóźnić.

4:22Wykonywanie danej transakcji czyli jeśli sobie postawimy jedną sekundę opóźnienia

4:26to dopiero po sekundzie po najechać myszką na ten element on zacznie zmieniać

4:31kolor nie tylko przepraszam i wtedy faktycznie się stanie.

4:36Sekundę i dopiero się zmienia.

4:38Nie jest to o tyle przydatne w tym

4:40konkretnym przypadku ale czasami jest to potrzebne np.

4:43jeżeli tworzymy jakieś menu które nam się rozwija z góry do dołu

4:48i chcemy dać użytkownikowi czas na to żeby zanim ono się zniknie żeby mógł sobie na

4:53nie wrócić swobodnie więc ten dalej jest całkiem przydatną właściwością.

4:57No i oczywiście tak jak już tutaj wcześniej przypadkiem zrobiłem to możemy

5:01ręcznie ustawić trasę rejon powiedzmy 0 3 sekundy.

5:06Następnie tranzyt.

5:09Property.

5:12Możemy ustawić tutaj albo ol albo możemy wymieniać po przecinku czyli np.

5:17Grand Border radiowóz.

5:22Głosujemy sobie

5:24tak naprawdę w tym momencie ten Bagram to

5:25jest wpisywane możemy to zostawić w ten sposób i to dalej będzie działało.

5:31A jeśli ustawiamy sobie tutaj.

5:34Border.

5:36Radiowóz na rowerze.

5:40Na zero to wtedy będziemy mieli taką ciekawą

5:43animację musimy sobie tego dilera na razie.

5:48że element nam się przywraca do kwadratu

5:51po przejechaniu niego myszką to jest całkiem ciekawy efekt.

5:54Myślę że jest to ciekawe do jakiejś strony portfolio.

5:59Czy generalnie galerii różnego typu możemy tutaj zrobić przeciętny obrazek w kółku.

6:05No i po najechać na niego myszką.

6:07On by się rozwinął do jego pełnej wersji.

6:10Więc to jest naprawdę pokrótce jak działa

6:12tranzyt więc tutaj musimy pamiętać o tym że aby tranzyt zadziałało to musimy po

6:18pierwsze wskazać jego długość musimy wskazać właściwości które

6:22mają się na nim łamać i musimy wskazać Time ang.

6:25Faction Time ang.

6:27factory mamy do wyboru domyślnie albo Is Is In i Hainaut i Zachód bądź lider.

6:34Mamy też Kubik Bajera który

6:37przyjmuje naprawdę już skomplikowane wartości od zera do 1

6:42i możemy aplikować tutaj coś podpowiedział

6:44zobaczmy jak to wygląda ale ciężko jest zinterpretować co zabieg

6:48PR robi bez żadnej wizualizacji tego na krzywej co też zrobimy w kolejnej lekcji.

6:54Także Kubik wizjer a raczej ręcznie się nie dotuje tylko korzysta się z narzędzi

6:58które Kubik wizjer generują dynamicznie w kolejnej lekcji mówimy KIF Reims.

7:04I jak z nich korzystać.