Every CSS Animation property

  Переглядів 38,500

chunkydotdev

chunkydotdev

День тому

Rock your web designs with CSS animations! 🌟 Dive into our electrifying tutorial where we'll show you how to animate like a pro, from the basics of @keyframes to mastering the transform property. Get ready to add motion to your sites with simple yet powerful animations and transitions. Plus, we'll tackle scroll-triggered animations to make your pages come alive as you scroll. 🎸🔥
#css #learnwebdevelopment #html #spinner #scrollanimations #cssanimationtutorial #cssanimation
--- Links
- code: github.com/chunkydotdev/anima...
- support this channel: buymeacoffee.com/chunkydotdev
- about me (which is out of date by a few years): chunky.dev
---
What You'll Discover:
Crafting animations with @keyframes
Transforming elements with CSS
Combining keyframes for complex animations
Triggering animations on scroll for dynamic user experiences
Using transitions for smoother effects
Engage with Us:
Hit that like button if you dig what you see, subscribe for more awesome content, and drop your animation creations or questions in the comments. Let's animate the web together! 🚀💻

КОМЕНТАРІ: 60
@JayantBB78
@JayantBB78 Місяць тому
Really love no nonsense videos like this. No. background music is the best part.
@sashank_gl
@sashank_gl Місяць тому
I can imagine the hardwork behind the scenes to put all this information together in a clean manner and I appreciate that!👏
@professornick_
@professornick_ 20 днів тому
The way you say it makes everything easier to understand. Thank you!
@criscutfry
@criscutfry Місяць тому
Holy moly! This is a holy grail of a video! the editing, the knowledge, the whole presentation and method of teaching is so effective, efficient, exciting!
@johnoneill4146
@johnoneill4146 22 дні тому
Good stuff man! This past week I used the scale transform property when hovering over a thumbnail in a show carousel. It looks great and it’s something you see a lot on big streaming sites these days. 🤘🏻
@CaptainLian
@CaptainLian 28 днів тому
Just an advice on the jaavascript part. Instead of listening to the scroll animation then checking the bounding box each time. Just use the IntersectionObserver API.
@benjaminjameswaller
@benjaminjameswaller Місяць тому
Love your style of video. It's short but very informative. Would love to see more even longer ones two. Thank you.
@Sakalakabaka
@Sakalakabaka Місяць тому
Awesome, thank you for making this video!
@shfahim7938
@shfahim7938 Місяць тому
Really good video with no background s***, straight to the point, real examples...
@yahyaelganayni4055
@yahyaelganayni4055 Місяць тому
This is the best tutorial on CSS animation ever thanks ✌️
@farhan-app
@farhan-app Місяць тому
This is EXACTLY what I was looking for.
@ruturajbhandari7695
@ruturajbhandari7695 Місяць тому
Amazing quality video. Keep it up 🎉
@sivasundarpt
@sivasundarpt Місяць тому
Simply explained the great things....🎉🎉🎉❤
@TherealKurtlivendal
@TherealKurtlivendal Місяць тому
Wow, can't get easier than this. Great tutorial. 🎉
@saranshparashar4257
@saranshparashar4257 Місяць тому
Loved the video. Thanks for the info dude!
@shaund2635
@shaund2635 Місяць тому
This is very nicely done. Thanks for the explanation. 👌
@workforth
@workforth Місяць тому
Just wanted to say thank you!
@CYCLONE_LEX
@CYCLONE_LEX Місяць тому
Hey Chunkey I suppose to say thanks for your contribution on this and whatever on web.Mostly paid found on this tube may i cant explore whole but i find paid ones. Your explain is perfect But as you know software is all about forgetting even have years of experience. A "cheat sheet" always indeed for this essentials to make you unforgettable Helping Hand on this web journey.So with content aswell unforgettable makes your content more meaningful.Because whatever seen is not permanent on mind even practice harder. You got my sub Buddy.😊
@edems131
@edems131 Місяць тому
Thanks, finnaly i understood css animation
@mayanksati1842
@mayanksati1842 28 днів тому
Thanks dude.
@jitizsehrawat2154
@jitizsehrawat2154 Місяць тому
Please make more such videos , this videos was awesome i have a request please make longer videos if possible and please also add projects using btml css and javascript
@nanobii
@nanobii Місяць тому
Already got some ideas from this!
@legendaan
@legendaan Місяць тому
Just subscribed you because of your easy explanation 👍
@galaxygang5055
@galaxygang5055 Місяць тому
Thanks bro
@kettenbach
@kettenbach Місяць тому
Great informative video. Well done 👍
@user-ou5qf7rc4k
@user-ou5qf7rc4k Місяць тому
thank you
@iNT3NS3CLUTCH
@iNT3NS3CLUTCH Місяць тому
Amazing video dude
@william5465
@william5465 16 днів тому
good stuff 🥳
@muhammad_zohaib936
@muhammad_zohaib936 23 дні тому
I subscribed your channel because of such an amazing content ❤❤ but i want a specific video examples on psuedo elements especially ::before ::after please 🙏🙏
@abdullahmalik3818
@abdullahmalik3818 Місяць тому
Great video ❤
@RDAswin
@RDAswin 7 днів тому
very useful bro keep it up ,thanks .👍👍👌👌
@zenetle
@zenetle 23 дні тому
Замечательная подача материала! Очень полезное видео
@SaadAlShiekhAli-sg4dl
@SaadAlShiekhAli-sg4dl 28 днів тому
you are the best
@annelih5479
@annelih5479 Місяць тому
Very good!
@daspov4709
@daspov4709 Місяць тому
Just best . Nothing more. You got a subscriber
@athardavid
@athardavid Місяць тому
Good video. Not adding music is the best part
@Strawberry_Htet
@Strawberry_Htet Місяць тому
Guys support him with likes... He deserves it.❤
@inaminam9080
@inaminam9080 Місяць тому
subscribed bro
@monkshee
@monkshee Місяць тому
wow
@tusharsharma2359
@tusharsharma2359 Місяць тому
Dude you are like a god to me! Please make some more videos like this, people have been waiting for them for years and no one is doing it but you! Keep up the good work and you'll reach the stars!
@Raapy
@Raapy Місяць тому
loving your content, its straight forward, i hoping if would you like to add the link of your code .
@chunkydotdev
@chunkydotdev Місяць тому
Thank you! You can check out the code for the last example in the video here: github.com/chunkydotdev/animation-example :)
@frontend_ko
@frontend_ko Місяць тому
subscribe!
@UnoUrong
@UnoUrong 13 днів тому
Amazing video! Clear and to the point. Question... Is it just me or there are some browser compatibility issues when using @keyframes? Thanks and cheers all !
@chunkydotdev
@chunkydotdev 13 днів тому
You are actually correct, named timelines in @keyframes are not fully supported, like "from" and "to" (drafts.csswg.org/scroll-animations/#named-range-keyframes) MDN has a great resource on what currently is supported and where: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
@ItsBarmanji
@ItsBarmanji Місяць тому
just finished basic CSS, should i get a view of tailwind as I will be shifting to some framework, I can go back and forth to see the differences OFC, or should I just play with CSS more? any advice (typically day of taking advice from rando's in internet)
@chunkydotdev
@chunkydotdev Місяць тому
Good question! I think you are in for a Journey of never ending learnings, so dont be afraid to try tailwind and after som time go back and learn some more css and so on. Follow what interests you and it will be easier to learn stuff 😄
@junioraftabreshamwale1383
@junioraftabreshamwale1383 29 днів тому
Hey bro im good with all the css animations as well as react and im currently lokking for jobs in front end development so any advice from your side ?
@chunkydotdev
@chunkydotdev 29 днів тому
Great question! I think what you need to land a job can vary a lot depending on where you are from, but often it is good to have a couple projects you've built that you can show on your resumé. If you can open source your projects as well, so that the company you're applying to can see your code and get a better feeling of your skills, that's a goldmine. Hope it helps! Good luck with the job hunt my friend!
@junioraftabreshamwale1383
@junioraftabreshamwale1383 29 днів тому
@@chunkydotdev thanks a lot my bro actually I have been doing internship since last month and currently searching for full time ...I'll follow the advice given by you and I'll MSG you as soon as I get something 😁. Thanks a lot bro 😁
@yamilmsilva
@yamilmsilva Місяць тому
Where can I get the documentation I would like to follow up with the video?
@chunkydotdev
@chunkydotdev Місяць тому
If you want to read more i think mdn is a great resource with examples and explanations: developer.mozilla.org/en-US/docs/Web/CSS/animation
@yamilmsilva
@yamilmsilva Місяць тому
@@chunkydotdev The way you explained was SO GOOD, (I have to say) that topic was something that I was a bit scared and you made It cristal clear, that is why I asked the documentation to follow along and practice… YOU ARE A GENIUS.🙏🏼
@alifttoheaven
@alifttoheaven 8 днів тому
Hey man! Can you copy paste the JavaScript to the description? I keep forgetting the if condition
@chunkydotdev
@chunkydotdev 7 днів тому
You can find it on github! :) github.com/chunkydotdev/animation-example/blob/main/index.js
@abrarmulla1196
@abrarmulla1196 Місяць тому
I am not the kid meme in the video in the beginning And I didn’t watch the full video (saying in a normal tone)
@jalaybeewala
@jalaybeewala Місяць тому
Davie403 ?
@chunkydotdev
@chunkydotdev Місяць тому
🤷‍♂️
Learn JSON in less than 5 minutes
4:59
chunkydotdev
Переглядів 1,2 тис.
The problems with viewport units
13:23
Kevin Powell
Переглядів 349 тис.
Лизка заплакала смотря видео котиков🙀😭
00:33
одни дома // EVA mash @TweetvilleCartoon
01:00
EVA mash
Переглядів 4,7 млн
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Переглядів 1,6 млн
Learn CSS Positioning Quickly With A Real World Example
8:32
Slaying The Dragon
Переглядів 542 тис.
10 CSS animation tips and tricks
20:13
Kevin Powell
Переглядів 161 тис.
Simple Yet Powerful: 5 HTML Elements to Use!
12:11
WebDev Frontiers
Переглядів 6 тис.
How to take control of Flexbox
16:01
Kevin Powell
Переглядів 71 тис.
The Secret Science of Perfect Spacing
9:40
Chainlift
Переглядів 234 тис.
Use these instead of vh
6:06
Kevin Powell
Переглядів 427 тис.
Incredible scroll-based animations with CSS-only
32:23
Kevin Powell
Переглядів 306 тис.
How To Not Suck At Design For Developers
14:23
Joy of Code
Переглядів 75 тис.
СМАРТФОНЫ HTC ВЕРНУЛИСЬ В 2024! Шок для Apple, Samsung и Xiaomi...
11:51
Thebox - о технике и гаджетах
Переглядів 37 тис.
Крутое обновление microReader!
5:54
Заметки Ардуинщика
Переглядів 28 тис.
Тестируем Gravis Ultrasound... ну почти.
48:18
Дмитрий Бачило
Переглядів 36 тис.
Как открыть дверь в Jaecoo J8? Удобно?🤔😊
0:27
Суворкин Сергей
Переглядів 962 тис.
Как должен стоять ПК?
1:00
CompShop Shorts
Переглядів 759 тис.