CSS3 Animation & Transitions Crash Course

Thank you MailTag for sponsoring this video

This is a beginner friendly crash course on CSS animation using keyframes as well as CSS transitions. We will do a little experimenting and we will build a small animated landing page project.

CODE: Code for this project

CSS CRASH COURSE FOR BEGINNERS:

BECOME A PATRON: Show support & get perks!

ONE TIME DONATIONS:

VISIT MY WEBISTE: Check Out My Udemy Courses

FOLLOW TRAVERSY MEDIA:

[mahdiarkhorramian]

That was incredibly simple yet sufficient tutorial, tnx a million dude

[blazebyte]

I'm a beginner web coder in my second semester for web design, and this video has helped me a lot for my CSS animation assignment. Thank you!

[Nm-qjsy]

I am working on a website for a school project and this video was just what i needed! THANK YOU SO MUCH!

[thallesyurisilvaoliveira]

This is one off the best tutorials I ever seen, congratulations for your job man! Subscribed from now!

[MrIhatefrogs]

Wow! only with you I finally understand very clear on how to use the css animation and transition. ive been using all your tutorials to become a frontend developer. thank you for teaching us!

[alexeysolovyev]

As far as i know. you should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and may lead to skipped frames(top, bottom etc). So you can use "transform(x, y)" to move elements on the page instead of top or left

[williamshakespeare]

Thank you. I just finished learning this and it was great to see how you did the same things using only CSS. Plus, your way is easier.

[madrinsx]

Omg! ..I don't know how much I can thank you but truthfully I was stuck with CSS3 and thankfully I found your videos ... 😍😍😍thank you so much for such great tutorials 😍looking forward to JS 2😍

[ho]

Thanks for the video. I am a beginner and It’s really very helpful and very importantly is the calmness with which you teach. It makes it look like you are right in front of the audience. You’re amazing!

[rickloesch]

Great video for beginning animators..I'm very old school and was still
using flash, but this will get me well on my way to using css. YOU ROCK!

[seemcat]

AHH, as always you never fail to disappoint me with your lessons. I learned SO much & have the tools I need to finish my tasks for a side project I'm working on. Thank you so much!

[AS-zwlk]

I learned a little something! Much appreciated. Thank you.

[Algebrodadio]

Dude.. Been waiting for this. I'm excited it's here.

[SunnybraeCroft]

A cold windy day on the Isle of Skye, I cannot think of no better way to spend it than sitting down with the computer and working my way through the animations and transitions. Many thanks for your time. Regards Hugh

[ionut]

hi, brad i wanna say thank you for tutorials and i wish to you and your family health and happiness!!

[ivanyosifov]

Actually animating top and left properties is a bad idea. Browsers are optimized to animate opacity and transform. It's much more performant to write
@keyframes heading{
0%{ transform: translateY(-50px); }
100%{ transform: translateY(140px); }
}
than to write
@keyframes heading{
0%{ top: -50px; }
100%{ top: 140px; }
}

[immohaimenul]

love it Traversy <3 keep the good work going.

[wakweikafelix]

Just got done following this tuorial and it's been an amazing way to spend a Saturday morning. Thank you for sharing!

[Andreterragt]

Man, your videos are completely awesome

[samuelstroh]

Thank you for the tutorial, it's one of the few who actually teaches you stuff instead of just talking to gain minutes of view time and asking for subscribe. That being said, new follower here :D