CSS3 Animation & Transitions Crash Course

Подписаться 2,2 млн

Просмотров 430 тыс.

50% 1

Add MailTag to your browser (it's free) ➜ goo.gl/qZf5Pj
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
www.traversymedia.com/download...
CSS CRASH COURSE FOR BEGINNERS:
• CSS Crash Course For A...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
VISIT MY WEBISTE: Check Out My Udemy Courses
www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
/ discord

Наука

Опубликовано:

15 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 391

@mahdiarkhorramian1675 5 лет назад

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

@Nm-qj4sy 6 лет назад

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

@thallesyurisilvaoliveira9128 3 года назад

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

@blazebyte277 5 лет назад

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!

@MrIhatefrogs 5 лет назад

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!

@ho96 2 года назад

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!

@williamshakespeare2482 6 лет назад

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.

@seemcat 5 лет назад

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!

@madrinsx8770 6 лет назад

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😍

@rickloesch5918 4 года назад

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!

@alcprado 6 лет назад

Hey Brad, these things are all around on the internet and all ready for use, however, this is real good to know how they are made and actually it gives you enough knowledge to change or do whatever u want with them. Thanks!!!

@AS-zw4lk 6 лет назад

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

@samuelstroh8631 3 года назад

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

@wakweikafelix 2 года назад

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

@przemekfijak411 6 лет назад

Hell yes! I've been waiting so long for it, thanks Brad! P.S. Please turn the subtitles in every video, my English isn't perfect, subtitles are very helpful :)

@Moshe5573 5 лет назад

I learned so much from this tutorial. Thank you and would be very interested in seeing more.

@SunnybraeCroft 4 года назад

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

@ionut1234567891011 6 лет назад

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

@wyrms4byrds341 3 года назад

Fantastic tutorial! I really needed this for my current web project.

@GoinFurthur 4 года назад

Great video. Super clear and easy to understand. Thank you for this!

@abdulnadeem3739 4 года назад

You cleared all my doubts about CSS Animations & Transition. Thanks

@PaulBarrett 6 лет назад

You absolute legend Brad, I've been wondering how to do that cool colour effect on the text on the animate.css landing page where it cycles the colours, you've answered this without even being asked. Keep up the good work, love your videos.

@joseluisdeoliveirasantos9131 6 лет назад

Really cool, easy to understand, objective approach. Thank you.

@petrusheikkila734 5 лет назад

Thanks a lot, man! This was suuuper helpful as I am learning HTML- and CSS-language in school. I actually feel like I am making something good :).

@Thisis256 6 лет назад

You are a great teacher to me via RU-vid....My PC hard-disk is filled with ur tutorials. THANK YOU FOR THE TUTORIAL.GOD BLESS YOUR FAMILY

@nwabuzorchukwuemekaobiora7361 4 года назад

You're amazing!!!! Thanks for this css eye-opener.

@JasonLee-ml1mb 6 лет назад

Brad, you're the best. Thanks for all you do!

@arvindersingh6638 4 года назад

you are wonderful sir i have watched your lots of videos you teach like a world best teacher. hats off to you i really appreciate your hardwork and experience.your videos are really helpful

@HarrysSecretWife 4 года назад

This was amazing and extremely helpful! Thank you so much

@TheAleksadnar 6 лет назад

Hell of a tutorial...always great stuff on this channel!

@Algebrodadio 6 лет назад

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

@immohaimenul 4 года назад

love it Traversy

@Rubariton 3 года назад

Such a good video. Many thanks. No bs, just plain facts and aplication of the theory

@bennash1878 2 года назад

I've watched so many tutorials, but I always find my way back to Brad.

@davidcraft4909 4 года назад

You know what makes this video so good, well I'm not sure but its really good. In a lot of your videos you actually teach people how to do stuff while most others you have to just copy their whole code and try to reverse engineer it to figure out what does what. As soon as you go to keyframes and the 0 to 100 percent stuff I paused your video and kind of went on my own with it and wow. but now I'm watching it again learning some more stuff. great video as usual and thanks for making them.

@foy5051 Год назад

This was simple and easy to understand. Thank you🔥🙌🏿

@panomapet9441 4 года назад

Amazing Traversy. U r doing amazing work!

@665vizinhodabesta 6 лет назад

Great video. The best I've seen about CSS.

@alexweissnicht9545 6 лет назад

We will start a school projekt soon where we are allowed to use only css and html this will be very helpfull thanks :-) Best wishes from Germany👍😇

@TraversyMedia 6 лет назад

Alex Weissnicht sounds fun. Good luck!

@gstff 5 лет назад

Haha noch mehr deutsche

@okandme 3 года назад

big school projekt

@pauldee227 5 лет назад

A fantastic introduction - thanks Brad!

@shibluhyder4259 3 года назад

Great tutorial! Very important video for beginner. Thanks a lot!

@sakinebarati7448 2 года назад

thanks a lot . I'm beginner in html and css and your channel is very helpful for me.❤❤

@shashankshines 4 года назад

Thabka for this awesome tutorial..much appreciated...feeling comfidemt in my project now.

@al_peterson 3 года назад

Thanks Brad! Great tutorial for beginners!

@Andreterragt Год назад

Man, your videos are completely awesome

@ivanyosifov2629 6 лет назад

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; } }

@hatemsaad3421 5 лет назад

@jantje beton he's right, you don't want to trigger layouts and make it impossible for the browser to composite using the GPU. Use transform instead.

@Vaaaaadim 5 лет назад

@jantje beton Yo, calm down there. You can't just destroy a man's whole career like that!

@chosenlink2 5 лет назад

Great point!

@sjn_ 5 лет назад

@jantje beton He is right, I have done an experiment on this after seeing a video and it's indeed true. Animating Transform and Opacity is much more performance friendly than animating any other properties. Though, this is just a tutorial based on animation, I don't think it's that big of a deal. However, Brad should've mentioned it in the video. But this usually comes in mind if devs actually care about their site performance. Not everyone is aware of this.

@mahmoudhassen4463 4 года назад

It works either ways so who cares

@sobeyyy 4 года назад

Thank you so much for this video, I just took a new position where I have a lot more styling responsibility so this will help me make it through the next week. EEEEK :)

@alexeysolovyev334 6 лет назад

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

@szyszak 6 лет назад

Yup, it's called "layout thrashing".

@jatindersingh9659 4 года назад

Just want to say thanks man...may the code gods be with you.

@priyaranjan1733 6 лет назад

Thank you Brad! 'ease' is the default for 'animation-timing-function' not 'ease-in-out' @ 13:00 ;)

@mukkuvaninthesea771 5 лет назад

This is what i was searching for weeks .. tq so much

@reefride323 4 года назад

I like the video, and I have just learned what I most wanted. Thanks.

@alexandertoretto9507 4 года назад

Amazing as always! Thank you so much!

@chintandeshpande4025 4 года назад

Sir ... You are amazing.....plz keep posting more video's like these

@nelsonking 6 лет назад

You are an absolute blessing Brad!

@abdilparlak 5 лет назад

Great animations! Thank you for sharing!

@mohanrajmuthusamy403 4 года назад

Awesome sir, I have learned lot of things on this video.

@cj4717 2 года назад

Thank you for the amazing course

@itsnobledean9450 Год назад

I enjoyed the video and learned tons.

@mufaddalm32 3 года назад

I like traversy media because the methods are really simple and understandable. While other tutorials put up their codes without explaining their proper use and sometimes they seem quite useless.

@sagarmaheshwary3150 6 лет назад

Thank you for your hard work Sir. your videos are amazing.

@farzeenshareef1380 3 года назад

Brilliant video sir. Thanks for this one.

@blunderfoxbeta 5 лет назад

I really liked your way of teaching

@sivakalyan3121 6 лет назад

Wow amazinggot excited with the title and icon itself soon will see and practice ..keep rocking and let us always rock Brad with the knowledge you are sharing to us ... If possible try to create some applications even though they are small and simple but total front end to back end for an application ..it should be like there should be 50 lines of all the languages that we use to create a full length application ...my sincere request ..plz try

@shubhanshutrivedi8517 3 года назад

Best tutorial on animation and transition

@zouhairsahtout9682 2 года назад

thank you so much bro i almost understand everything, now i have some knowledge that i can play with

@joey1317 3 года назад

Thank you so much for helping me! You are a life saver!

@Coachhere 6 лет назад

Nice video very detailed and informative I would only suggest you telling something about the cross-browser compatibility

@wgd2441 5 лет назад

thank you so much for this ,it helped me alot .

@lanc3068 4 года назад

You are very awesome I didn't know anything but after this video I leart many things about animation I will like your video

@tarcus6074 6 лет назад

Thanks Brad. Cool as always.

@Davijorge 4 года назад

This was a great tutorial. Congrats.

@desispinner7387 6 лет назад

this man uploaded this topic when i need it the most

@DavidNYIRINGABO Год назад

This is really helpful, Thanks by the way

@bijaybudhathoki8858 6 лет назад

thanks for this wonderful crash course. Please do some video tutorials on javascript design pattern.

@myselfhere2922 5 лет назад

Thanks a lot!!! The tutorial is really helpful! :)

@flashgamewalkthroughs5145 6 лет назад

I did the button rotation as a part of the animation, which I think looks pretty cool. It does get stuck for a little moment and then continues spinning around. But if you wanna do the rotation during the animation, your @keyframes code should look something just like this (I changed the name from "btn" to "button"): @keyframes button { 0% { opacity: 0; transform: rotateY(120deg); } 33.3% { opacity: .5; transform: rotateY(240deg); } 100% { opacity: 1; transform: rotateY(360deg); } }

@nikkobenosa9841 3 года назад

Thank you for this beautiful content sir

@GabrielRodrigues-br5qf 5 лет назад

Oh my god You helped me a lot in my school. Thank you guy you're nut!

@mehransayed3690 2 года назад

It was just wonderful n helped me a lot, thank you so much sir, may God bless you ✨🙏🏻 From Afghanistan 🇦🇫

@MrThisistooeasy 5 лет назад

loving your channel

@samuelpimenta1942 6 лет назад

Thanks a lot! My gratitude!

@deathbell4965 5 лет назад

Great video Learned alot thanks man

@mokshaGyanRam 5 лет назад

Awesome course thanks man

@UnaNeary 3 года назад

Thank you so much for this. Great starting point.on how CSS keyframes work. I was struggling. I did not know about the animation-fill-mode: forwards; Though I did have to add some more code to get it to work on my div-block at 28:50 @keyframes my-example { 0%{ transform: translateY(50px); } 100%{ transform: translateY(-40px); } }