Animacje CSS w 30 minut 😱 opowieści, skrypty #23

Animacje w CSS to jedna z moich ulubionych działek frontendu. To dzięki nim nasze strony i aplikacje ożywają, dlatego warto wiedzieć w jaki sposób możemy je tworzyć. Zrozumienie podstaw animacji CSS nie jest trudne, wystarczy poznać główne założenia i właściwości, dzięki którym poruszymy nasze elementy. W tym odcinku opowiem Wam o takich właściwościach jak keframes, animation-fill-mode, animation-direction i wszystkich pozostałych, dzięki którym sterujemy animacjami.
🔍 Sprawdź też odcinek o wydajności animacji w CSS:
• Wydajność w CSS 😱 opow...
⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale:
/ @helloroman
📓 Kup Hello Notes na sklep.hellorom...
🔔 Subskrybuj mój kanał - www.youtube.co...
📌 Sprawdź też:
Instagram - / siemaroman
Facebook - / helloroman.vlog
Moja strona - helloroman.com
📫 Mój newsletter - helloroman.com...
✉️ Kontakt - [e-mail]
W moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS - pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React.

[@rastz9808]

A propo kolejnosci wlasciwosci animation: warto zwrocic uwage że w przypadku animation-duration i animation-deley kolejnosc ma znaczenie tj. No. 2s 5s - pierszy parametr bedzie odczytywany jako duration. Swietny odcinek, pozdrawiam :)

[@helloroman]

Aaa! Masz racje, totalnie o tym zapomniałem :) Wielkie dzięki i przypinam komcia ❤️

[@jakubparlej2216]

Właśnie o tym samym pomyślałem haha

@@jakubparlej2216 i nie tylko ty

[@maciejkawka9715]

Zrób taki bardziej skomplikowany tutorial o jakichś dziwnych animacjach, które, na przykład, nakładają się na siebie, gdzie dyrygujemy nimi, że mamy jakieś tam dileje i tak dalej! Co do samego odcinka: super wytłumaczone, dzięki! Czekam na więcej!

[@szczupak7953]

Świetny materiał teraz zabieram się za robienie jakiejś prostej animacji dzięki (:

[@TheMrJ99]

Świetny odcinek :D. Super by było zobaczyć więcej materiałów dotyczących animacji w css na Twoim kanale!

[@historiezpolski]

>"Nigdy nie używajcie height i width w animacjach. NIGDY." >width i height na miniaturce A poza tym to kolejny świetny film!

[@helloroman]

Haskell hahahh 😂😂😂 ale czad, nie zauwazylem tego (to nie moj kod :p)

[@adamgamesstudio]

Xd

[@ewaevva4375]

Cudny z Ciebie nauczyciel, wszystko tak bardzo zrozumiałe. Dziękuję. Tak, prosimy o lekcję o "skomplikowańszych" animacjach, to baaardzo ciekawe i wciągające

[@helloroman]

Eva Eva ale miło ❤️😂 dzięki wielkie

[@ewaevva4375]

@@helloroman nie Romanie, to ja dziękuję Tobie że poświęcasz swój czas dla nas :)

[@jakubmalicki6357]

Ja już co prawda podstawy mam za sobą, ale i tak doceniam i lajkuję materiał. Ja z niego korzystam jako przypomnienia, bo jest przydatny. Sugerowałbym zrobić podzielenie odcinka na fragmenty, aby łatwiej się szukało to, czego potrzeba.

[@mikoajpaszkowski2985]

Sztos! Please...więcej takich kursów bo tłumaczysz baaaardzo dobrze! :D Suba daję z przyjemnością!

[@annamoskwa4722]

Trzy dni rozmyślałam nad tym, jak sprawić żeby kolejne div z animation-delay:3s; wskakiwały od razu po załadowaniu strony. Eureka dzięki Tobie osiągnęłam sukces. Dziękuje.

[@c10943]

rewelacja uwielbiam czerpać wiedzę z twoich odcinków

[@tomaszgasior772]

Materiał dobry również do odświeżenia i usystematyzowania posiadanej wiedzy.

[@niedobreliterki]

Zawsze wydawało mi się, że animacje w css to czarna magia i nawet nie chciało mi się tego uczyć. Jak dobrze, że trafiłam na twój kanał. Dzięki wielkie za to video!

[@helloroman]

Teela ale super ❤️❤️❤️ czyli udało mi się wytłumaczyć? 😀

[@ocean3323]

@@helloroman Tak w dodatku tutaj tłumaczenie było najlepsz jakie znalazłem

[@jerzyhaa]

sylwek, a ja oglądam o animacjach css ;-) szczęśliwego nowego

[@janusnowak3268]

Dzięki za odcinek ! Prawdopodobnie przyda mi się do licencjatu ;)

[@Pici3k]

Świetne, dzięki! ;)

[@marno7140]

Zastosuje to na mojej pierwszej stronce , dzieki :D

[@marcinkalmar9964]

super film , bardzo dobrze wytlumaczone :)

[@jip8793]

Ech co ja bym zrobiła bez tego kanału :D

[@adrianosky282]

Łapka do góry w ciemno i oglądamy :)

[@michableja934]

Pytanie pewnie bardziej na jakieś stack-overflow, ale nie zaszkodzi spróbować :) Napisałem na stronie dwie animacje - jedna to pojawianie się elementu, takie jak w tutorialu, druga to pulsujące podświetlenie elementu za pomocą box-shadow (tak, wiem że to nie wygląda dobrze, ale poeksperymentować chciałem :)) z określonymi właściwościami animation-direction: alternate; animation-iteration-count: infinite;. Założenie było takie, że 3 elementy pojawiają się po kolei w odstępie 3 sekund, a po najechaniu na któryś z nich kursorem pojawia się owo pulsujące podświetlenie. Wszystko działa, tyle że po zjechaniu kursorem z podświetlonego elementu znika nie tylko podświetlenie, ale również sam element. Mam nadzieję, że wytłumaczyłem to w sposób względnie zrozumiały :) Masz/macie jakiś pomysł czemu tak się dzieje albo patent jak tego uniknąć?

[@smok3nlbn]

Prosiłbym o zaawansowany poradnik. Dobra robota. Wszystko ładnie wytłumaczone! Pozdrawiam!

[@marekchudy8893]

Dziękuję i pozdrawiam

[@michableja934]

To ja bym poprosił o ten bardziej zaawansowany tutorial :)

[@TrotyL99]

I jakiś fajny projekt animacyjny

[@filiphubertsuwik8209]

Hej Roman. Szacunek po paz kolejny. Btw, skoro już zgarniasz nagrody to może odcinek o tym co sprawia że strona jest dobra w kontekscie UX ?

[@hev4482]

Do śniadanka :D

[@filipczechowski]

Te cyferki w krzywych beziera, to żadna magia dla koksów :) Oznaczają ona kolejno: X pierwszego wąsa, Y pierwszego wąsa, X drugiego wąsa, Y drugiego wąsa. Współrzędne początku to zawsze 0,0, a końca zawsze 1,1. X musi się zawierać od 0 do 1. Jeśli ktoś pracował w jakimkolwiek programie graficznym to bez żadnej trudności wyobrazi sobie o co kaman. Zakładam, że programiści muszą mieć wyobraźnię jako-tako rozwiniętą ;) . Warto spróbować zrobić kilka krzywych cyferkami i okazuje się, że to jest dużo szybsze.

[@helloroman]

Przecież dokładnie tak to wytłumaczyłem 😂 co nie zmienia faktu, że napisanie krzywej z głowy nie jest najprostszym zadaniem

[@filipczechowski]

To chyba mi umknęło to tłumaczenie :) To jest tak jak się po nocach człowiek dokształca ;)

[@kubakrzeminski2067]

pięknie wybrnąłeś z tym opacity w 11 minucie :D

[@Mar-yo4vu]

Krzywa Beziera? FireFox i Chrome na 100% pozwala się tym bawic przy zbadaj element. Może skorzystasz przy nastempnym. Dobra robota, 👍

[@helloroman]

Tak, w devtoolsach spokojnie można tym pokombinować. Ale już nie chciałem mieszać w głowach

[@mtsstnslvssn]

Wincyj 👍

[@michumk00]

Odcinek o animacjach mogłeś jednak wyrenderować w 60 fps. W 24 fps ciężej zauważyć różnicę w animation-timing-function, bo bardziej klatkuje.

[@helloroman]

W kwestii fps czesto musze isc na kompromis. Material filmowy z poczatku i konca wygladalby totalnie zle w 60fps dlatego domyslnie zawsze uzywam 24. Z drugiej strony te 24 klatki aż tak tragicznie nie haczą. Niestety nie da sie stworzyc klipu ktory mialby dwie rozne predkosci na przemian.

[@michumk00]

@@helloroman Jak to się nie da? :D Jeśli montujesz w premiere pro to wystarczy, że nagrasz materiał filmowy w 24/25/30 klatkach, a materiał z kompa w 60 i wrzucisz wszystko na jedną sekwencję, w której będzie ustawione 60 klatek i wyrenderujesz. Materiał z kompa będzie się wyświetlał normalnie w 60 fps, a materiał z kamery będzie po prostu jako 24 klatkowe wideo na 60 klatkowym klipie. Framerate nie definiuje przecież prędkości filmu, tylko ilość klatek podczas jednej sekundy więc 24 fps będzie dalej wyświetlane jako 24 fps na 60 klatkowym klipie.

[@helloroman]

Motuje w resolve, ale nie wiedzialem o tym co piszesz. Myslalem ze przy eksporcie ujednolicasz framerate dla wszystkich klipów. Dzieki ❤️ obczaje to

[@grzegorzbrzeczyszczykiewic199]

wideo sie zaczyna na 5:06

[@SuchyKT]

Dzień dobry Romanie :) Na wstępie podziękuję Ci za ten materiał a teraz przejdę do mojego zapytania. Jak zrobić, by kwadrat przechodząc z lewej krawędzi do prawej zamieniał się w kółko lub trójkąt i żeby następowało to w miarę płynnie? Albo taki scenariusz. Zaczynamy od kwadratu, przechodzimy do trójkąta i wracając do lewej krawędzi trójkąt przeistacza sie w kółko. Dziękuję Ci, że dzielisz się z nami swoją wiedzą. Pozdrawiam gorąco!

[@helloroman]

Z kwadratu w kółko bez problemu za pomocą border-radius, ale trójkąta bez używania SVG nie ogarniesz (w sensie sam trójkąt w CSS jak najbardziej, chodzi mi o przejście kwadrat-koło-trójkąt w animacji)

[@maciej-x5g]

Może zrobiłbyś odcinek o Svelte? Czy Twoim zdaniem warto brać to pod uwagę już do produkcji (freelance, bo w korpo wiadomo inne zasady)?

[@helloroman]

Słyszałem o nim mnóstwo dobrego, ale jeszcze nie próbowałem go używać

[@hev4482]

Mógłbyś zrobić poradnik na przykład o 'html pug' ? Mam tu na myśli poradnik o tym, że robisz sobie osobne sekcje w osobnych plikach i w finale łączą się w jeden plik wyjściowy. Jeśli istnieje na to inny sposób (preprocesor) to byłoby nawet lepiej :)

[@tomaszkumiega4325]

Chyba ci chodziło o tutorial z jakimś webpackiem albo parcelem, czyli module bundlerem ;)

[@xSlavko221]

pug to silnik html. Według mojej aktualnej wiedzy kilka oddzielnych plików w jeden łączysz za pomocą właśnie narzędzi do automatyzacji typu gulp/webpack ewentualnie skrypt w bashu.

[@szczeczaczoszczeczek5077]

pug to silnik szablonów taki jak twig dla backendu i polegają na tym samym. Szablon strony rozbijasz na mniejsze szablony które dołączasz do szablonu nadrzędnego. szablon podrzędny to "block" który jest podstawiany w szablonie nadrzędnym w blocku o tej samej nazwie. W pugu wszystko oczywiście musi być przerobione na jeden plik (mogę się mylić), bo w js nie ma systemu plików, chyba że używasz go w node na serwerze. W twigu phpowym nie ma z tym problemu. Jedyne co musisz znać to składnie silnika i jakieś ciekawe wbudowane zmienne lub funkcje ułatwiające wyświetlanie treści

[@paczekgrubas]

pytanie. w 18:15 jest animation-direction:alternate i pozniej zeby to dzialalo jak trzeba to dodajesz animation-interation-count:infinite. A czy efekt nie bedzie ten sam jak zostanie tylko ta druga linijka z infinite , ale juz bez alternate?

[@BlacKlyExactly]

Oglądam w ciemno I czekam na gsap

[@LyczeQQ]

Roman zamierzasz w najbliższym czasie zrobić jakiś kurs o podstawach html, CSS, js lub mógłbyś polecić jakiś, w którym materiały będą aktualne, a nie przestarzałe, jak w większości?

[@helloroman]

Myślę, że będą się pojawiać tego typu odcinki o jakichś ciekawych zagadnieniach dotyczących CSS, ale raczej nie planuję takiego jednolitego kursu od A do Z.

[@ukasz4216]

roman co lepsze czytanie ksiazek o programowaniu czy bootcamp szkolenie 3 miesieczne zaznacze ze chce zmienic branze

[@staffid_]

W3S ma błędy i jest niedokładne? Dobrze wiedzieć w sumie bo dopiero się uczę cssa i htmla i nie wiedziałem o tym. Dzięki roman :v

[@jakubparlej2216]

Może jakiś odcineczek o Codepen.io ? Np. co można w nim zrobić i jak skonfigurować ustawienia, aby np. podpowiadało wartości :D

[@helloroman]

ten odcinek trwałby chyba z 30 sekund :P Bo tam wszystko jest w sumie jak na dłoni napisane

[@adison2117]

Dlaczego "min-height: 100vh" przesuwa klocek na środek ekranu? 100vh to nie przypadkiem 100% przesunięcia względem ekranu i nie powinien się znaleźć na samym dole?

[@helloroman]

Klocek tu nie ma nic do rzeczy, ponieważ sam w sobie nie posiada żadnej właściwości pozycjonującej. Pozycjonuje go rodzic wykorzystując display: flex z ustawionym „center” na align-items (centruj w osi X) i justify-content (centruj w osi Y). Dopóki rodzic (body) nie miał właściwości określającej wysokość, jego wysokość była równa wysokości największego dziecka (w tym przypadku jedynego dziecka jakim jest box). Dopiero kiedy określisz minimalną wysokość body jako 100vh (czyli wysokość twojego viewportu), środkiem body staje się równocześnie środek viewportu.

[@yourSOULismy]

Roman wszystko fajnie ale dlaczego mam nie animować top,left itp. Jeśli chcę by element mi się pojawił od 0 do 100% width na stronie to mam tylko translate X używać? Nie widzę powodu

[@helloroman]

Jak chcesz miec wolno dzialajaca strone to smialo 👍 tlumaczylem w tym albo kolejnym odcinku dlaczego nie warto

[@reactor8502]

W jaki sposób w codepenie tak szybko tworzysz divy? Jakiś magiczny skrót?

[@helloroman]

Jakub Nakielski nazwa klasy np. .box i naciskasz tab ;)

[@paulinanaurecka3416]

W jaki sposób napisać, aby animacja startowała dopiero w momencie kiedy przeskroluję na nią? Tzn. mam One Page Website i animację umieściłam na dole (nie jest widoczna na stronie głównej). Teraz jest tak, że jak odświeżę stronę to animacja startuje, chociaż jeszcze nie zjechałam scrollem na nią. A chciałabym, aby startowała w momencie kiedy jest wyświetlana. Mam nadzieję, że w miarę zrozumiale to napisałam. Z góry dzięki za pomoc:)

[@paulinanaurecka3416]

Czy tutaj musi wejść JS?

[@Bartkos20]

@@paulinanaurecka3416 raczej na pewno js :)

[@tomekskrill3959]

Hello Roman, Według Ciebie rola CSS będzie spadać w developerce wraz ze wzrostem takich narzędzi jak PostCSS?

[@helloroman]

Ktoś jeszcze używa PostCSS? xD

[@tomekskrill3959]

@@helloroman Widziałem w jednym z ogłoszeń Netguru w wymaganiach.

[@helloroman]

@@tomekskrill3959 no to jest raczej takie, że fajnie jak ktoś wie czym to jest. Ale nie kojarze żeby ktoś u nas z tego korzystał w tej chwili. Raczej CSS modules / styled-components

[@tomekskrill3959]

@@helloroman Spoko, dzięki za odpowiedz :)

[@helloroman]

@@tomekskrill3959 A tak odpowiadając szerzej na Twoje pytanie - CSS zawsze będzie podstawą stylowania naszych aplikacji i stron. Masz niby twory w postaci CSS in JS, ale w gruncie rzeczy ich zapis nadal jest po prostu CSS-em jak np. w styled components. Dobra znajomość CSS'a moim zdaniem jest super istotna dla frontendowca

[@DeVinhone]

Poprosimy o bardziej zaawansowany tutorial :)

[@morrovd4733]

korzystam z w3schools i wd mnie jest dobry

[@helloroman]

To czy ten serwis jest dobry czy nie to nie jest kwestia opinii tylko faktów - znajduje się tam tona błędów. Jeśli chcesz wiedzieć jakich konkretnie to odsyłam do bloga Tomka Jakuta, który się solidnie rozprawił z tym serwisem.

[@kiliusz]

Nikt nie miał dosyć, zwłaszcza jest niedostatek lajwow z helloroman.com

[@patryniupatryniowiczpatryn6720]

Bonus RPK - Opowiesci, skrypty

[@adamsiekierski3133]

Co ze stroną? Przecież jest cały czas w budowie.

[@helloroman]

Jest i jeszcze trochę pobędzie ;)

[@rlfbr5539]

PIEEEEEEEEEEEEERWSZYY

[@macrosparky1223]

co ty gadasz w3schools jest spoko

[@helloroman]

Niestety nie jest :C Ich materiały zawierają sporo błędów i rażących uproszczeń