A small change makes a big difference in CSS animation design. Please subscribe to the channel to keep updated with interesting videos about web programming and web design ❤❤❤❤❤❤
firstly you are doing a great job teaching CSS, I want to share something that you don't have to go to anywebsite to do this we can simply do this in the inspector and it also works perfectly just like the website. here's how you can use this in CSS for animation we use animation property and in the inspector element near the fill-mode we see a small icon, by simply clicking on it we can see multiple options and we can design our own wave for the animations in ease-in, out and obviously cubic-bezier. I am using this technique for quite a time. Its pretty handy animation: name duration timing-function delay iteration-count direction fill-mode;
This CSS knowledge may be difficult to understand for those who are new to it, hopefully this video is detailed enough for everyone to understand. ❤❤❤❤
You can also use the dev tools in in example Chrome and adjust any transition you got on your page on the fly with draggable handles like that site, but with the bonus of seeing how it affects your specific animation on your page.
Sir!!! u r seriously on another level compare to us in css...my css knowledge is pretty good but comparing to u ... i feel like nothing and lots to learn more....appreciate ur work!! keet it up
Really nice explanation of how cubic-bezier works. But a small note is that at 2:20, the cubic-bezier expression is cubic-bezier(1, 0.11, 0.66, 0.8), and not cubic-bezier(0, 0.11, 0.66, 0.8). You move 1 on X axis and 0.11 on Y. Other than that, gg
Your video contents are great, easy to understand and useful. It may be a personal preference, But please stop with the obnoxious sound effects. They are ok maybe one or two times. But having them play over again again after every sentence is painful to listen to. it is your channel and your content, so you have full right to do whatever you want but as a regular follower of this channel I have found myself not checking out your videos in a fear of having to listent to them. I dont want to sound too negative, I do like your videos and thanks for making them.
keep up the good work. would you be interested in showhing how you handle fonts, sizing and good practises around that ? your pages have such cool design and fonts i'd be interested 👍
create some tutorials with framer motion and gsap with next.js or react.js please. These tutorials are 🔥 need them with gsap or framer motion too please
Any chance we could get a reupload of the video about the animation from 0:10? That was pretty great, but gone when i was planning to use it in my project
Hey Dev I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.
you should always specify what is animated. Like { transition: width 0.5s } is the correct way of doing it. If you write { transition: 0.5s } you are actually animating everything and it is much more consuming
@@lundeveloper Well, I think people would pay money to see a full animation course. Maybe on Udemy or something. I'll glady pay for something this good.
I'm super sorry, I might be missing something, but at 2:47. The purple cercle is equal to (0, 0.11) which means (from what i understood) that x = 0, and y = 0.11. But in the video, at 2:47, x =1 amd y = 0.11. Am i missing something here?
@@lundeveloper With super pleasure! By the way, even tho teaching more complex css is a little harder, ur one of the best channel to explain it with your level of editing!
Hi, I love this animation but when I tried it myself I find that when you hover from one item to another the item that you moved away from can glitch out a bit, anyone know why this is and how to solve? Thanks
A small change makes a big difference in CSS animation design. Please subscribe to the channel to keep updated with interesting videos about web programming and web design ❤❤❤❤❤❤
Create a full blown css course from intermediate to God lvl
Can you please make a video of how you create your contents bro ?! thanks... ❤
RUclips's most demotivating channel. Every time I watch a video on this channel, I'm reminded of how much I still need to learn.
I will share everything I know, hoping it will reach those who find it useful in the future.
inspiring channel
so just learn what he is saying and use it every site lol and then do something else
with it
I have been studying frontend for more than 3 years, but I still think I have to learn more to adapt to new features and modern web.
Learning is a must-have skill in this field. It never stops if you want to stay relevant.
firstly you are doing a great job teaching CSS,
I want to share something that you don't have to go to anywebsite to do this we can simply do this in the inspector and it also works perfectly just like the website. here's how you can use this
in CSS for animation we use animation property and in the inspector element near the fill-mode we see a small icon, by simply clicking on it we can see multiple options and we can design our own wave for the animations in ease-in, out and obviously cubic-bezier. I am using this technique for quite a time. Its pretty handy
animation: name duration timing-function delay iteration-count direction fill-mode;
This CSS knowledge may be difficult to understand for those who are new to it, hopefully this video is detailed enough for everyone to understand. ❤❤❤❤
sure, It's more then enough
If you find 1 small problem in this video , it proves that you have watched and understood how it works !
@02:17 it should be cubic-bezier(1, 0.11, 0.66, 0.8)
That's it, right?
Bro acually saved my career as a dev. Thank you so much. Words cannot express how much we appreciate this video
Thank you very much, I'm glad it was useful
Did this guy spend his entire life just learning CSS. His works freaks me out honestly
You can also use the dev tools in in example Chrome and adjust any transition you got on your page on the fly with draggable handles like that site, but with the bonus of seeing how it affects your specific animation on your page.
Exactly
Why this channel is so underrated, the best channel to to level up our basics ❤
Thanks a lot. Hopefully one day soon this content will reach those who need it ❤❤❤
great, so helpful
Sir!!! u r seriously on another level compare to us in css...my css knowledge is pretty good but comparing to u ... i feel like nothing and lots to learn more....appreciate ur work!! keet it up
Thank you for watching my content, I will try to share everything I know so we can grow together. ❤❤
It helps every time. 100%
😍 Thank you
you are the best bro, thx
That's awesome!!!
Need a full series on css animation from scratch to advance it will be soo helpfull.
😍😍
so underated yt bro appreciatte for the content you provide to u s
Hey bro, desperately need your three JS tutorials with your awesome voice :)
This was very informative for me
Thanks Dude
Really nice explanation of how cubic-bezier works. But a small note is that at 2:20, the cubic-bezier expression is cubic-bezier(1, 0.11, 0.66, 0.8), and not cubic-bezier(0, 0.11, 0.66, 0.8).
You move 1 on X axis and 0.11 on Y.
Other than that, gg
❤
wow
Insane knowledge
haha ❤❤❤❤
Your video contents are great, easy to understand and useful. It may be a personal preference, But please stop with the obnoxious sound effects. They are ok maybe one or two times. But having them play over again again after every sentence is painful to listen to. it is your channel and your content, so you have full right to do whatever you want but as a regular follower of this channel I have found myself not checking out your videos in a fear of having to listent to them. I dont want to sound too negative, I do like your videos and thanks for making them.
Its amazing thank you so much!!!!!!
wow espectacular bro !!!
thank you sir
No, it's even easier for programmers 😀
u deserve better man. Big fan.
Thank you so much brother 😍
I really really love your videos. Hoping for your success.
I was wondering if you could recommend any books for css and designs in general.
Cam on, merci.
Wao. Thank you 😍
Please where you get your images, it's so epic
So cool. Thank you!!
keep up the good work. would you be interested in showhing how you handle fonts, sizing and good practises around that ? your pages have such cool design and fonts i'd be interested 👍
Thanks for giving me ideas for future content. It means a lot to me. 🔥🔥🔥
Cool, thank you
Very useful thanks
create some tutorials with framer motion and gsap with next.js or react.js please.
These tutorials are 🔥 need them with gsap or framer motion too please
speed ramping in css is a different level HAHA
This helped me fr, ありがとう!
Also I NEED the background img sources if you don't mind 🤧
I often search for wallpapers on 'pinterest'
What art are you using? I love the style and would like to use something similar if it's not copyrighted :)
Thank you sir!
Thank for watch my content 😍
Hey there, can you make a video for parallax effect. Also, is it possible do it in low code platform using custom code block?
Any chance we could get a reupload of the video about the animation from 0:10? That was pretty great, but gone when i was planning to use it in my project
Use cubic transitions rather than ease s type transition ❤❤❤ thanks it will level up the css animation
Thank you for watchibg my content 😍
@@lundevelopermake more videos please
you´re amazing!!!
is that Mr Beast voice or am i tripping??
yeah, is def. AI generated and most likely to Jimmy's voice... you are not trippin'
Is it possible to do Tracing Beam effect(react component ui) as in Aceternity UI with CSS, if yes do a video on that.
great info.. tragic AI voice :)
Do you do the editing , which software you use
from where did you get all that PNGs like some models and everything can you tell me ??
What about the transition for display none and block 🤔
These sound effects are lit!
What tool or software do you use for your voice, or any AI??
0:53 where can I get the sorce code for this one. I understood the cubic bezier but the divs are not behaving like that.
Hey Dev I have a website which is made by html css and js but I want to show that website in desktop view for all devices. Will you plz make a video on this topic or can you please share the code of desktop view for all devices.
you should always specify what is animated. Like { transition: width 0.5s } is the correct way of doing it. If you write { transition: 0.5s } you are actually animating everything and it is much more consuming
Anh code hả 1 trang web dùng html css js tiếng việt đi ạ 😂 e thaya VN chưa ai làm bao giờ
Can you do a full course on animations? Like a crash course or something?
I really don't want to create something that costs you money. I share everything I know for free on this channel, hoping it will help you
@@lundeveloper
Well, I think people would pay money to see a full animation course. Maybe on Udemy or something. I'll glady pay for something this good.
Netflix hover card effect
I'm super sorry, I might be missing something, but at 2:47. The purple cercle is equal to (0, 0.11) which means (from what i understood) that x = 0, and y = 0.11. But in the video, at 2:47, x =1 amd y = 0.11. Am i missing something here?
You're right, this is an error in the video editing process. Thanks a lot. The correct coordinates would be (1, 0.11). Love You
@@lundeveloper With super pleasure! By the way, even tho teaching more complex css is a little harder, ur one of the best channel to explain it with your level of editing!
Why back to mr beast? Voice
Don't listen the voice but the knowledge he is giving friend😊
I want to know about that so I can also create dynamic and attractive websites
Please as soon as possible reply me when i try this my image get strech and that does look good what i do about this
What ai voice do you use please tell
Love your content, keep it up, but please change this AI voice 🥲
"Master CSS"
Proceeds to use a non responsive unit to give items a width
Please share the source code of the project used in this video.
To practice it.
I'd rather call it spellbending. Like Lun dev: the CSS bender😂
Hi, I love this animation but when I tried it myself I find that when you hover from one item to another the item that you moved away from can glitch out a bit, anyone know why this is and how to solve? Thanks
Solved with transition-timing-function: linear;
The wonky sound effects don’t work for me. Unsubscribing.
you are using AI MR Beast's voice LOL
from where did you get all that PNGs like some models and everything can you tell me ??
from where did you get all that PNGs like some models and everything can you tell me ??
from where did you get all that PNGs like some models and everything can you tell me ??
from where did you get all that PNGs like some models and everything can you tell me ??
from where did you get all that PNGs like some models and everything can you tell me ??