CSS3 Animation & Transitions Crash Course

[@blazebyte277]

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!

[@mahdiarkhorramian1675]

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

[@samuelstroh8631]

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

[@alexeysolovyev334]

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]

Yup, it's called "layout thrashing".

[@Nm-qj4sy]

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

[@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

[@alexweissnicht9545]

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]

Alex Weissnicht sounds fun. Good luck!

[@gstff]

Haha noch mehr deutsche

[@okandme]

big school projekt

[@bennash1878]

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

[@thallesyurisilvaoliveira9128]

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

[@minecrafthamody3082]

In 14:55 the code looks messy by using all these statements separately, you can do it only in one line with one statement called (animation) ``` animation: name time func delay iteration dir fill play; animation: none 0s ease 0s 1 normal none running; ```

[@madrinsx8770]

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😍

[@Thisis256]

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

[@alcprado]

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!!!

[@rickloesch5918]

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!

[@ho96]

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!

[@ionut1234567891011]

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

[@ivanyosifov2629]

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]

@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]

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

[@chosenlink2]

Great point!

[@sjn_]

@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]

It works either ways so who cares

[@mufaddalm32]

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.

[@davidcraft4909]

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.

[@wakweikafelix]

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

[@williamshakespeare2482]

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.

[@abdulnadeem3739]

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

[@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!

[@arvindersingh6638]

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

[@codeIMperfect]

You built the Pyramids!!

[@yahhglmlh134]

No Doubt !

[@AS-zw4lk]

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

[@priyaranjan1733]

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

[@Andreterragt]

Man, your videos are completely awesome

[@jatindersingh9659]

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

[@박초코-e8r]

/* TRANSITIONAL PROPERTIES -Properties that have an identifiable halfway point background-color background-position border-color border-width border-spacing bottom color font-size font-weight height left letter-spacing line-height margin max-height max-width min-height min-width opacity outline-color outline-offset outline-width padding right text-indent text-shadow top vertical-align visibility width word-spacing z-index */

[@paulosantana9607]

Thank you!

[@przemekfijak411]

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 :)

[@gizellystefanny]

The best channel, Thanks!!!!

[@hanzlaahabib]

True

[@insideTheDiv]

maybe true

[@shub.trivedi03]

Best tutorial on animation and transition

[@PaulBarrett]

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.

[@Rubariton]

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

[@petrusheikkila734]

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 :).

[@sakinebarati7448]

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

[@mukkuvaninthesea771]

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

[@Richard-wh6wg]

I'm actually surprised everytime you say it's a basic introduction, because your crash courses cover more things than the entire web develpoment course I've made

[@zouhairsahtout9682]

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

[@wyrms4byrds341]

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

[@ph3mmy136]

Downloaded this offline. But it would be criminal if I didn't come back and give you a like and a sub. This was super helpful. Thank you

[@nelsonking]

You are an absolute blessing Brad!

[@melwinalm]

A real quick way to get started with Animations and Transitions

[@GGSoft2009]

That's why I love this chanel.

[@flashgamewalkthroughs5145]

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

[@JosueOrNoSway]

Boss as always bruh, way better than crusty plugins

[@orincywhytedesigns]

SUCH A SOLID VIDEO👏🏾👏🏾

[@mehransayed3690]

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

[@nwabuzorchukwuemekaobiora7361]

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

[@Saurabh2816]

you are the only youtuber I don't mind watching sponsor ads on..

[@hanzlaahabib]

haha true

[@UnaNeary]

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

[@vunderstudios]

god I love it when you say Helvetica! 25:58

[@heavydirtysoul1491]

that's weird, man

[@mfadhilal-fatih1427]

hmm..

[@blunderfoxbeta]

I really liked your way of teaching

[@TheAleksadnar]

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

[@chintandeshpande4025]

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

[@sobeyyy]

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 :)

[@AyyazTech]

Very easy and simple. I really appreciate for great video. Thanks and Keep it up

[@Algebrodadio]

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

[@lanc3068]

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

[@immohaimenul]

love it Traversy

[@panomapet9441]

Amazing Traversy. U r doing amazing work!

[@itsnobledean9450]

I enjoyed the video and learned tons.

[@JasonLee-ml1mb]

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

[@Coachhere]

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

[@yourhighnesshodlr]

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

[@krisssachintha]

Great video brad, greating from srilanka 🇱🇰

[@farzeenshareef1380]

Brilliant video sir. Thanks for this one.

[@dsa-7015]

thank you man you are a life saver

[@foy5051]

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

[@somnvm37]

About 19:00, u can use easier way, just Transition: 0.1s all; Usually u need to change nothing here.

[@minimaltechdev]

Nice tutorial and also nice animations

[@drakash6060]

Great video! Thanks a lot. I learned much new things.

[@HPTBANDIT]

Would you mind doing a video on how to trigger animation on the window/scroll with jquery?

[@joseluisdeoliveirasantos9131]

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

[@cj4717]

Thank you for the amazing course

[@yashdeore473]

this tutorial was very helpful thanks a lot 👍👍👍👍👍👍

[@zrkmedia7417]

You are awesome Brad

[@pyroghost11]

dude seriouesly your videos are the best!

[@al_peterson]

Thanks Brad! Great tutorial for beginners!

[@pauldee227]

A fantastic introduction - thanks Brad!

[@MrThisistooeasy]

loving your channel

[@Oath_Keeper1979]

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

[@nikkobenosa9841]

Thank you for this beautiful content sir

[@DavidNYIRINGABO]

This is really helpful, Thanks by the way

[@floriansuess7525]

I'm like a couple months into web dev (your php tutorial is responsible so thank you); but still, a disclaimer. I've been going nuts with animations in my first few projects, and I also wanna highlight that I have been playing around with particles.js heavily etc etc... Recently, for the first time, started noticing performance issues (especially when pissing around with particles), fps getting dragged down and stuff during certain animation sequences and all that jazz. Now this was on a high powered device too, so it must be overly bloated, which I totally understand and I suppose is easily solvable by removing stuff bla bla bla. Nevertheless; would be nice to see how we can gauge these issues using dev tools of some sort, and answer questions like 'how do we know our user has a buttery smooth experience?', 'are there specific red flags regarding animations or rule of thumbs for approach?' or 'how can we simulate a large array of different popular devices?' or is there a approach we can take that gives us an understanding of popular devices performances etc.. etc.. I haven't seen anything like this before and I believe principle training like this could better perfect some front-end peeps albeit, I can imagine this is a difficult thing to discuss about and subjectivity comes into play, but your a pro, and advice would be super valuable. Love your videos bro, your straight up teaching me everything 👊🏼 peace!

[@shibluhyder4259]

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

[@sivakalyan3121]

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

[@tarcus6074]

Thanks Brad. Cool as always.

[@GoinFurthur]

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

[@homewalttechnologies1273]

IT WAS A NOCE VIDEO ...VERY SIMPLE TO LEARN...KEEP IT UP...(PLEASE DO SOME ADVANCED LEVEL ANIMATION ON CSS, WE HAVE SUBSCRIBED YOUR CHANNEL FOR THAT)

[@dzenetahajdarpasic1113]

That pic on your computer display today is of my country

[@mohanrajmuthusamy403]

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

[@Moshe5573]

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

[@prudhvichitturi6915]

hi brad i am following your videos since an year and they helped me a lot building my career and i want to ask you whether you can make a video on service workers-making the progressive web app

[@naveenau143]

Quality-content: 100%;

[@shashankshines]

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

[@Davijorge]

This was a great tutorial. Congrats.

[@mokshaGyanRam]

Awesome course thanks man

[@deathbell4965]

Great video Learned alot thanks man