CSS po przejściach [CSS transition] 😱 opowieści, skrypty #24

Przejścia w CSS czyli po angielsku CSS transitions, to jeden z najczęściej wykorzystywanych efektów w CSS. Dzięki niemu w łatwy sposób możemy ożywić nasz interfejs i sprawić, że korzystanie z aplikacji czy strony stanie się przyjemniejsze (o ile wiemy co robimy). W dzisiejszym odcinku tłumaczę, czym są CSS transitions, jak je pisać i na jakie rzeczy należy uważać.
Zobacz poprzedni odcinek o animacjach w CSS:
• Animacje CSS w 30 minu...
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.

[@jakubnam]

Dobrze się dowiedzieć, że używanie width, top etc. jest niekorzystne w animacjach, dzięki wielki!

[@Pici3k]

Uwielbiam te filmy. 😁 Muszę się w wolnym czasie dokopać do poprzednich odcinków.

[@helloroman]

dzięki wielkie

[@maxmaks4044]

Dzięki wielkie! Niby znam te wszystkie CSSy itd, ale dzięki Tobie lepiej się to układa w głowie!

[@tomekoskroba9147]

Dzięki wielkie! Prawdziwy "Skarbiec Wiedzy" z Ciebie! ;)

[@horryportier7539]

no takie poradniki to się szanuje

[@marekchudy8893]

Dziękuję i pozdrawiam

[@lexiu_]

film na pewno mi się przyda. dzięki ;)

[@jakubparlej2216]

Wszystko proste i klarowne. To mi się podoba ;)

[@tarasshevchuk8477]

super!

[@adrianosky282]

Siema, może nagrałbyś jakieś filmy o dostosowaniu breakpointów do strony internetowej + jakieś przykłady? Oglądałem filmy o RWD na twoim kanale, w ogóle to wszystkie filmy na twoim kanale oglądałem :) Ale nie znalazłem jakiś przykładowych breakpointów, jak tego używać itd.. Media query + orientation, sporo tego jest, jak już CSSa nagrywasz to pomyślałem że Cie zainspiruję i powstaną jakieś fajne i wartościowe filmy na ten temat. Możesz (luźna propozycja oczywiście) nagrać jeszcze o Grid'zie albo Flexbox'ie. Ogólnie to łapka w górę, popcorn i oglądamy :D

[@emilkowalski_]

Bootstrap ma dobre przykłady breakpointów, a orientation dajesz na landscape gdy chcesz stylizować w pozycji poziomej

[@helloroman]

Nie ma czegoś takiego jak sztywno określone breakpointy. Każdy projekt będzie wymagał ich na innej rozdzielczości. To Twoją odpowiedzialnością jako developera jest zadecydować na jakiej szerokości warto dać breakpointy, żeby zapewnić najlepsze doświadczenie użytkownikowi. Web to nie print, tutaj nie ma określonych formatów do których można coś dopasować. do poczytania: medium.com/simple-human/stop-using-device-breakpoints-b11a87e2625c

[@adrianosky282]

@@helloroman Dzięki za odpowiedź czegoś takiego szukałem.

[@tomek901225]

Dziękuje!

[@profiler11]

Dziękuję. :)

[@xdestris5399]

Spoko odcinek, ale ja czekam w końcu na coś z JS :D

[@helloroman]

Już sporo było, jakby nie było :D

[@peetmaster]

fajne. przyda sie na projekt.Dzieki)

[@robertkonkel3653]

13:10 general sibling combinator w moim przypadku nie zadzialal mimo ze kod wyglada prawie identycznie jak u ciebie jaki moze byc tego powod i czy da sie zrobic to innym sposobem?

[@michamodrzejewski6747]

A może różnica w kodzie polegała na tym, że nie było to rodzeństwo? Sprawdź to: developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

[@lexiu_]

będzie film dotyczący czystego htmla z css? chodzi mi o zrobienie strony w html

[@helloroman]

raczej nie planuję czegoś takiego

[@mikoajchudy2688]

Hello, szybkie pytanko: Co to za plugin przy react dev tools?

[@BartekSmolucha]

Hello Roman, jak się odniesiesz do wpisu na MDN, że will-change powinien być używany w ostateczności?

[@helloroman]

To jest pokręcone dość mocno, ale szerzej poruszam ten temat w odcinku który wspominam

[@ComandeerPL]

Zapraszam też do komentarzy pod tamtym odcinkiem, bo ciekawa dyskusja się wywiązała ;) Edit: a jednak nie do końca pod tym, a pod odcinkiem o pseudoelementach (Opowieści, skrypty #7). Tam toczyła się ciekawa dyskusja o `will-change` rozpoczęta przez Argento.

[@woket4730]

Cześć, Jaka jest różnica pomiędzy "*" i "body" w CSS?

[@helloroman]

Woket google misiu 😘 tam wszystko masz napisane. Podpowiem ze * to universal selector

[@MikulskeeTV]

Mam pytanie: jak skonstruować transition jeśli chcemy by w transformie inaczej animował się translate a inaczej np scale? Czy jest to możliwe?

[@helloroman]

Tak jak pokazalem mozesz dac po przecinku instrukcje dla kolejnej wlasciwosci wiec np piszesz „transform 1s ease-out, opacity .3s .7s ease-in”

[@MikulskeeTV]

hello roman tak, ale chodzi mi czy można osobno animować transform: translate i transform: scale().

[@helloroman]

@@MikulskeeTV z tego co wiem nie ma prostego sposobu na to, ale można to obejść np. klasami (tak na szybko kleję teraz, ale tak mi się wydaje że można)

[@MikulskeeTV]

hello roman dziękuje za odpowiedz. Myślałem ze może istnieje jakiś magiczny css’owy zabieg, o którym nie słyszałem. ostatnio sprawiło mi to problem 🙂 ps: kolejny świetny odcinek 👌🏼