How To Animate Page Loading With CSS

[@ayandak47]

3:24 CSS code for appearance, 5:55 CSS code for rest of styling and animation load

[@billyrosehag]

Truly masterfully explained, I bow my head to you sir!

[@WebDevSimplified]

Thank you!

[@SushmaSureshBabuSSB]

5:56 for the animations part

[@SXCRD]

Another brilliant idea for a video, nice man you are appreciated.

[@WebDevSimplified]

Thank you!

[@joshbogs]

You have no idea how helpful you have been to me. Thanks for the content man

[@WebDevSimplified]

You are very welcome! I'm glad my videos are useful.

[@glassofmeat]

time to go apply this to my portfolio site :)

[@comanandrei1993]

2 videos in, subscribed! Holy cow, how did I NOT find this channel until now??!

[@WebDevSimplified]

Thank you so much! I really hope the rest of my videos are just as enjoyable for you.

[@carlospen8413]

Simple to the point and works! THANKS!

[@DarthRhaadoo]

This is a damn clear explanation of css vars and efficient uses for them. I just subbed.

[@WebDevSimplified]

Thank you so much! I'm really glad you enjoyed the video so much.

[@Swerce0]

Bro your playlist of projects are mind blowing 🤯🤯🤯🤯🤯🤯 man respect for you bro 🤜🤜

[@adnanamin3666]

Truly great explanation! :)

[@WebDevSimplified]

Thanks!

[@maskman4821]

Thank you Mr. Kyle Cook for explaining css animation, I finally figure out how css animation works and know how to apply it. I have wasted way too much time on "Online Tutorials" channel, who created a lot of fancy css effects but never speaks up. I got stuck with tons of before/after pseudo element and animations. Now with this tutorial I got all figured out, I am partially relieved, thanks a bunck for this tutorial, Mr. Kyle Cook has set me free !!!

[@WebDevSimplified]

I am really glad I could help!

[@ChillCityNaveen]

Very clear explanation about each part of animation css thank you so much dude...:)

[@bloodhunter4410]

Thank you so much I was in trouble

[@ronny332]

Wow, just wow. Thank you!

[@sergioselvaggi1947]

Are there any criteria to do it without affecting SEO?

[@avneet12284]

I enjoyed it. Much easier with Greensock but it's great to do it without a library too

[@WebDevSimplified]

I do think GSAP is really nice, but for simple small animations like this CSS is great.

[@avneet12284]

@@WebDevSimplified I agree

[@anshraii2670]

Bro this is masterpiece..⚡⚡

[@paulharvey11]

Your explanation makes it simple to understand, thank you! (subscribed)

To make the animations backward compatible you should change around the default to the end state and use 'backwards' instead of 'forward' fill-mode.

[@OnePiece_Fandom]

Thanks bro u are truly a master💞

[@jawaharr9446]

This is one of the coolest presentations. Learnt a lot today!! Thanks much

[@WebDevSimplified]

You are very welcome!

[@jakubgadzala7474]

Every time I see you, and it's like once per year. Every single time I wonder how the heck you look so perfect. That hair, jaw line, eyes. I'm straight, but how do guys like you end up in web dev. 🤣

[@frans3884]

Thank You. this is very helpful

[@trungnhanle3531]

thanks sir, you will be a my idol

[@sergeykolesnik1171]

This is GOLD

[@williambienz8238]

Thank you!

[@akn9699]

Awesome ! Flawless and Authentic !

[@WebDevSimplified]

Thank you so much!

[@Reagan_Aristo]

Thanks alot for this...did the same thing in the same steps and it worked ✨🍷I feel like a top developer at Microsoft 😂🙌Thanks alot... I'll keep practising!!🍷

[@munyetech]

i like make this tutorial nice bro

[@DavidGomezCanon]

Great video! Can I get animations to work repetitively while scrolling up and down only with ccs?

[@sherifsalah5563]

When did they apply the opacity to hexadecimal colors #FFFFFF44? I've been stuck to rgba() since the dawn of humanity 😭 .. I always learn something new from your videos .. thank you bro 😊

[@WebDevSimplified]

It has been around for awhile now. I generally use rgba as well, but felt like mixing it up this video.

[@tryndamere9541]

@@WebDevSimplified tbh kyle I was looking how to this and you showed this in the blink of an eye really thank you Kyle

[@mdosmangani2691]

Just awesome thanks

[@mayurkarthik9]

thank you 🥲🙂

[@Matin1999_T]

very informative. thank you.

[@boultifnidhal2600]

that is so helpful, thank you so much ♥♥

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++ thank you 😃

[@mascode1]

Very cool vid!

[@christian_otaku]

thank you

[@paras3285]

God Bless You . Thanks

[@wdee-rh1nu]

Thanks for the video. How can I animate an object to come from below to the middle of the webpage then return below...away from sight (onload)?

[@BigDoubleJoe]

pure quality

[@WebDevSimplified]

Thank you!

[@ayedabboushi7221]

thanks!

[@rahmanchowdhury4747]

thanks

[@maxtofly1606]

It just needs an overflow hidden somewhere in the nav, to stop the horizontal scroll while loading, caused by the last item coming from the right side of the screen.

[@aniketverma852]

Great 🙏

[@blackpurple9163]

So this animation will work if I move from one page to the other if animation is applied to that page too?

[@lesalmin]

So much to learn in a single lesson. Great work!

[@joelivengood4895]

This is awesome Kyle, however the first div and second div are doing the same animation. the first child isn't animating from the left like yours is. I have the exact same code.

[@ijazkhan3335]

Thanks. Do you have any plan to do tutorials on Electron?

[@WebDevSimplified]

Not right now. I want to learn and experiment more with Electron first myself before I dive into any tutorials on it.

[@tryndamere9541]

what is electron?

[@ijazkhan3335]

@@tryndamere9541 Electron is a cross-platform javascript technology to build desktop applications.

[@IvanJuras]

Your channel is amazing to get these small bits of usefult code. Please, continue on with this format: it's great!

[@WebDevSimplified]

Thank you!

[@ianpropst-campbell6028]

Awesome and fun tutorial! The one thing I'm stuck on is the h1 elements. They don't show up. I have them set to animation-fill-mode:forwards and everything. Checked line by line with the github repository, and it looks like I've copied your code completely. But the h1 titles are no where to be seen! Did anybody else have this issue?

[@GOAL_HIGHLIGHT]

But when we scroll up the paragraph and head tag would go to the top of the page instead of going under the nav at the top

[@CiroPeixoto]

Show !!! 👏👏

[@HungerGamesGameplays]

liked the video.. i am a new sub!

[@odysseaskorelides7897]

I was fighting with transitions for one week in row and you made it clear for me in 10sec, thank you a lot you are the best.

[@ijpterror77]

You are having an amazing content in your channel

[@shub_zzz]

Yes please!!!

[@WebDevSimplified]

I like that idea. I am actually thinking of doing a group of live streams for a larger project like that but I am not sure when that will be yet as I have a lot of planning to do that.

[@MrVisheshsingh]

wow!

[@nikhilpatidar4714]

I have applied 2 animations to tr element, one on page load and other on hover but there is some problem in it, after i hover on tr the 1st animation start again which i don't want. CAN ANYONE HELP

[@munyetech]

woow nice bro

[@WebDevSimplified]

Thanks!

[@oZoooMx]

Hey man, I was wondering, if I'm using scale(0) is there any other way to stop the scaling at the beginning? I'm using scale 0 on my navbar but can't seem to figure out how to stop it. Any help would be awesome.

[@WebDevSimplified]

I am not sure what you mean by trying to stop it from the beginning.

[@PramodKarandikar]

Very well explained, just like all your other videos. Keep up the good work!

[@WebDevSimplified]

Thank you!

[@arvindersingh9863]

This guy looks like young cap. america

[@rishabsharma5307]

Please Upload react project tutorials

[@WebDevSimplified]

I have quite a few React tutorials on my channel already and more coming soon. I also have a full React course available.

[@hiddenninja7792]

wow...

[@vineetspeakwell]

Bro we can do all this with elementor pro then why get such type of hectic process

[@WebDevSimplified]

Just because there are tools to build sites like elementor or Wix it doesn't mean that people want to build sites with those tools or that those tools can build the site they want. Many people just want to learn how to do things or in my case many sites I build are far too complex for something like Wix since my sites handle databases and servers and dynamic content.

[@augischadiegils.5109]

❤️❤️❤️❤️❤️❤️

[@dewamshah8713]

this video is too fast who doesnt know anything about CSS animations :/

[@WebDevSimplified]

Good point. I didn't really intend this video as an introduction for CSS animations, but more as a fun use case for them. I really want to make a video specifically on an introduction to CSS animations since I have used them in a lot of videos.

[@dewamshah8713]

@@WebDevSimplified thanks man.. I really loved the how to modern your website series.. would love to see something like that❤️

[@WebDevSimplified]

@@dewamshah8713 Thanks! I have a few other videos on building/designing HTML/CSS pages that you can checkout on my channel. They are similar to that series.

[@sandoxs]

could you talk a lil bit faster pls

[@WebDevSimplified]

You can speed up the video if you think it is too slow. I get a lot of people telling me I talk too fast so I slowed my speaking down a bit for this video.

[@sandoxs]

@@WebDevSimplified Actually I was joking dude, I think you talk too fast

[@44aliano]

Thank you