Level Up Animation With Master CSS
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- In this video, width topic Level Up Animation With Master CSS, I will share with everyone how to simply upgrade my animation the way a CSS master usually does, complex transitions in CSS will be created from a single line.
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#javascript #code #css
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: hohoang.dev@gmail.com
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.
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... ❤
TH-cam'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
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
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 ❤❤❤
Nicely Explained, Thanks
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. ❤❤
That's awesome!!!
Need a full series on css animation from scratch to advance it will be soo helpfull.
😍😍
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?
Hey bro, desperately need your three JS tutorials with your awesome voice :)
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
so underated yt bro appreciatte for the content you provide to u s
It helps every time. 100%
😍 Thank you
Wow very useful tip !
This was very informative for me
Thanks Dude
you are the best bro, thx
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
great, so helpful
wow espectacular bro !!!
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!!!!!!
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
Cam on, merci.
Wao. 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. 🔥🔥🔥
u deserve better man. Big fan.
Thank you so much brother 😍
speed ramping in css is a different level HAHA
wow
So cool. Thank you!!
Cool, thank you
Thank you sir!
Thank for watch my content 😍
thank you sir
you´re amazing!!!
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.
❤
Very useful thanks
No, it's even easier for programmers 😀
This helped me fr, ありがとう!
Also I NEED the background img sources if you don't mind 🤧
I often search for wallpapers on 'pinterest'
These sound effects are lit!
Please where you get your images, it's so epic
What art are you using? I love the style and would like to use something similar if it's not copyrighted :)
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ờ
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
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 there, can you make a video for parallax effect. Also, is it possible do it in low code platform using custom code block?
Do you do the editing , which software you use
Is it possible to do Tracing Beam effect(react component ui) as in Aceternity UI with CSS, if yes do a video on that.
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.
Netflix hover card effect
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'
What tool or software do you use for your voice, or any AI??
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.
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 🤔
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
Love your content, keep it up, but please change this AI voice 🥲
I want to know about that so I can also create dynamic and attractive websites
I'd rather call it spellbending. Like Lun dev: the CSS bender😂
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!
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
"Master CSS"
Proceeds to use a non responsive unit to give items a width
What ai voice do you use please tell
Why back to mr beast? Voice
Don't listen the voice but the knowledge he is giving friend😊
Please share the source code of the project used in this video.
To practice it.
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 ??