CSS3 Animation & Transitions Crash Course

[@mahdiarkhorramian1675]

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

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

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

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

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

[@codeIMperfect]

You built the Pyramids!!

[@박초코-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!

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

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

[@shub.trivedi03]

Best tutorial on animation and transition

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

[@HPTBANDIT]

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

[@jatindersingh9659]

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

[@priyaranjan1733]

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

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

[@zouhairsahtout9682]

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

[@GGSoft2009]

That's why I love this chanel.

[@programmingcubsaslamandpri6375]

Plz god send this guy as my teacher

[@itsnobledean9450]

I enjoyed the video and learned tons.

[@OrincyWhyteDesigns]

SUCH A SOLID VIDEO👏🏾👏🏾

[@Rubariton]

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

[@Coachhere]

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

[@JasonLee-ml1mb]

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

[@al_peterson]

Thanks Brad! Great tutorial for beginners!

[@TheAleksadnar]

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

[@JosueOrNoSway]

Boss as always bruh, way better than crusty plugins

[@nikkobenosa9841]

Thank you for this beautiful content sir

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

[@mehransayed3690]

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

[@ayihayyy]

no time stamps?

[@mohammadsarfarazafzal]

Thank you 3000 times.

[@shashankshines]

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

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

[@ishitamahatme9375]

Thank you so much for this! :D

[@craiggazimbi]

Thank you Brad !!!

[@crypticcoding9680]

Thank you so much.

[@Joost1092]

Awesome, thanks!

[@TheLinguists]

One question: after hovering over the Read More button, it flips 180 degrees, but also the text flips and stays in that condition. Is there any way to fix this so that when the button flips, the text flips and comes back to its natural form while still hovering on it?

[@krisssachintha]

Great video brad, greating from srilanka 🇱🇰

[@farmanfarman209]

thanks its really helpful

[@mokshaGyanRam]

Awesome course thanks man

[@SuperVersicherungen]

Hi Brad, here did you put the PHP login App, i liked it very much

[@jodyclaggett786]

Dude, great videos!

[@mikeychars2536]

Great tutorial

[@bijaybudhathoki8858]

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

[@JKhalaf]

Very useful, thank you.

[@ericksonmorilla1266]

Hi Brad, Have you a tutorial how to create Responsive Navigation Bar Shrinkable like what I see on your website? Your Navbar was so cool and I like it. Thank you!

[@alias7611]

Can you please do a video on Angular animation? Thanks

[@drivgest]

thanks brad......

[@rishitamukherjee4941]

what i need to do if i want the first animation and the text animation to coexists?

[@AlvinandTheBand]

Hey Brad, can you make a tutorial for making a background like instagram? It is really good and attractive. All colors keep changing from one to another.

[@simpleprogrammer5834]

Helpfull.. Thanx bro

[@sirvenux]

thanks

[@hirephpdevelopers3840]

Thanks brad for the video.

[@ahmetomer1759]

Very helpful video thanks a lot Brad :)

[@jaganPuram]

Good job Brad...Thanks

[@hamzajaved1115]

I was waiting for this tutorial for long time thank you love from pakistan

[@yuenyalung7139]

great tutorials !! can you teach feathers.js next? looking forward to it :) TNX!!

[@myselfhere2922]

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

[@shayan3725]

Hmm... even though the colour of my block changes, it doesn't move around. I don't understand what's wrong...

[@arnavnegi6099]

Brother your work really helps me, plzz... guide me From where can I practice much more example, Any platform ?

[@ProfSeven]

Why do you write left when it goes right?

[@johabib8354]

thank you

[@austinetom77]

Thank you sir

[@nadavyair6350]

great vidoe i like it vary much.

[@ahmadalmuosawey556]

you are wonderful amazing thanks for all keep continue

[@rami1329]

What is he using? Its like vs code but yellow

[@skyroomgaming411]

Hi thanks!

[@dorsolomon7251]

Hey brad I made a comment the other day about web scraping with node.js nightmare.js hope you saw the comment, I think people will like something like this. Thanx !!!

[@MohamedYuss]

Thanks 🙏🏻

[@citrapavan9247]

superb

[@maxmaksum4673]

awesome

[@DjYoungize]

what happend to the bootstrap login system ?

[@MuhammadJunaidge]

Could you tell me how much properties and values in css please tell me about all properties about css because I want to know about css completely ! I hope you will replies me as soon.

[@EagleClipCh]

Ok so live server does not update at all is this possibly an issue with me using firefox instead of chrome

[@hydricbluen8498]

how would you incorporate this with a little bit a javascript. For instance {yourClassName}.classList.toggle({yourClassToToggle}); and then have it run the keyframes animation? Would you do like how i did above, or would you do it some other way?

[@RandomGuy-hh4dk]

your previous class may contain some style so instead of toggling the class add another document.querySelector(".classToSelect").classList.add("ClassContainingAnimation");

[@hardeep8587]

amazing....

[@Heffsta02]

what vs code snippet/extension are you using for the html autocomplete ?

[@Heffsta02]

never mind found it....for anybody who might want it. The extension is " HTML boilerplate" by Sid the Sloth.

[@jordanzhen7174]

I LOVE THIS VIDEO I LOVE IT I LOVE IT I LOVE IT

[@mgr5550]

Is it easier to do these kind of animations in ADOBE ANIMATE ?

[@alihusham1560]

Im using react spring, but css animation look easer .. i dont understand why poeple use react spring

[@nazhadlatif4765]

hi helo can you help me what is name application thnks for answer me .

[@crazy_vulcan]

Hey Brad, yesterday I was in the middle of working on your PHP login tutorials and when I went on KZbin this morning they were all gone. What happened.....

[@Super_Cool_Guy]

Timothy McManus yeh me too

[@Microbex]

yay.. we have Flash back, now with much more tedious workflow.

[@denniswilson8571]

thanks u

[@kiranhart3396]

Where did the login system go :(

[@kirthimedia5235]

.box { background: tomato; height: 200px; width: 200px; transition-duration: 1s; } .box:hover { transform: rotateZ(360deg); }

[@dilciafermin7180]

I always want to make a landing page for my WS, Thanks, God Bless

[@diptithosar3690]

What is the software name

[@alegend4625]

visual studio code as the editor and google chrome for the browser

[@MuhammadJunaidge]

nice video

[@MylesGmail]

Sweeeeeeet!

[@insideTheDiv]

really !

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

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

[@tommyzDad]

Thank you for this.

[@Nm-qj4sy]

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

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

[@AS-zw4lk]

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

[@gizellystefanny]

The best channel, Thanks!!!!

[@hanzlaahabib]

True

[@insideTheDiv]

maybe true

[@mobibi3996]

/* TRANSITIONAL PROPERTIES -Properties that have 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 */

[@ngelemar]

If you hover around the button while the animation is still in progress you can see the mouse changes and you can click it without seeing it. One way to avoid this is to use "pointer-events: none;" in the .btn class then at 100% {...; "pointer-events: all;"} here's where I got this trick: kzbin.info/www/bejne/jpSZeGali5dnr6c