No video
CSS3 Animation & Transitions Crash Course
Рет қаралды 431,571
Күн бұрын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
@mahdiarkhorramian1675 5 жыл бұрын
That was incredibly simple yet sufficient tutorial, tnx a million dude
@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!
@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!
@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
@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".
@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!
@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
@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!
@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.
@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 4 жыл бұрын
big school projekt
@AS-zw4lk 6 жыл бұрын
I learned a little something! Much appreciated. Thank you.
@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
@Thisis256 6 жыл бұрын
You are a great teacher to me via KZfaq....My PC hard-disk is filled with ur tutorials. THANK YOU FOR THE TUTORIAL.GOD BLESS YOUR FAMILY
@bennash1878 2 жыл бұрын
I've watched so many tutorials, but I always find my way back to Brad.
@ionut1234567891011 6 жыл бұрын
hi, brad i wanna say thank you for tutorials and i wish to you and your family health and happiness!!
@Andreterragt Жыл бұрын
Man, your videos are completely awesome
@wakweikafelix 2 жыл бұрын
Just got done following this tuorial and it's been an amazing way to spend a Saturday morning. Thank you for sharing!
@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!!!
@Moshe5573 5 жыл бұрын
I learned so much from this tutorial. Thank you and would be very interested in seeing more.
@immohaimenul 4 жыл бұрын
love it Traversy
@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 :)
@GoinFurthur 5 жыл бұрын
Great video. Super clear and easy to understand. Thank you for this!
@wyrms4byrds341 3 жыл бұрын
Fantastic tutorial! I really needed this for my current web project.
@abdulnadeem3739 4 жыл бұрын
You cleared all my doubts about CSS Animations & Transition. Thanks
@nwabuzorchukwuemekaobiora7361 4 жыл бұрын
You're amazing!!!! Thanks for this css eye-opener.
@TheAleksadnar 6 жыл бұрын
Hell of a tutorial...always great stuff on this channel!
@cj4717 3 жыл бұрын
Thank you for the amazing course
@Algebrodadio 6 жыл бұрын
Dude.. Been waiting for this. I'm excited it's here.
@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.
@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 :).
@itsnobledean9450 Жыл бұрын
I enjoyed the video and learned tons.
@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.
@jatindersingh9659 4 жыл бұрын
Just want to say thanks man...may the code gods be with you.
@pauldee227 6 жыл бұрын
A fantastic introduction - thanks Brad!
@JasonLee-ml1mb 6 жыл бұрын
Brad, you're the best. Thanks for all you do!
@farzeenshareef1380 3 жыл бұрын
Brilliant video sir. Thanks for this one.
@panomapet9441 4 жыл бұрын
Amazing Traversy. U r doing amazing work!
@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
@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.
@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 :)
@665vizinhodabesta 6 жыл бұрын
Great video. The best I've seen about CSS.
@joseluisdeoliveirasantos9131 6 жыл бұрын
Really cool, easy to understand, objective approach. Thank you.
@alexandertoretto9507 5 жыл бұрын
Amazing as always! Thank you so much!
@Rubariton 3 жыл бұрын
Such a good video. Many thanks. No bs, just plain facts and aplication of the theory
@zouhairsahtout9682 2 жыл бұрын
thank you so much bro i almost understand everything, now i have some knowledge that i can play with
@HarrysSecretWife 4 жыл бұрын
This was amazing and extremely helpful! Thank you so much
@OrincyWhyteDesigns 2 жыл бұрын
SUCH A SOLID VIDEO👏🏾👏🏾
@blunderfoxbeta 6 жыл бұрын
I really liked your way of teaching
@minimaltechdev 4 жыл бұрын
Nice tutorial and also nice animations
@mukkuvaninthesea771 5 жыл бұрын
This is what i was searching for weeks .. tq so much
@DavidNYIRINGABO Жыл бұрын
This is really helpful, Thanks by the way
@abdilparlak 5 жыл бұрын
Great animations! Thank you for sharing!
@al_peterson 3 жыл бұрын
Thanks Brad! Great tutorial for beginners!
@foy5051 2 жыл бұрын
This was simple and easy to understand. Thank you🔥🙌🏿
@h3yfriday659 6 жыл бұрын
awesome!!! waiting for this one!!! 😁
@nikkobenosa9841 3 жыл бұрын
Thank you for this beautiful content sir
@aleksandarv.1459 3 жыл бұрын
Keep up the good work!
@sagarmaheshwary3150 6 жыл бұрын
Thank you for your hard work Sir. your videos are amazing.
@shashankshines 4 жыл бұрын
Thabka for this awesome tutorial..much appreciated...feeling comfidemt in my project now.
@AyyazTech 2 жыл бұрын
Very easy and simple. I really appreciate for great video. Thanks and Keep it up
@nelsonking 6 жыл бұрын
You are an absolute blessing Brad!
@shibluhyder4259 3 жыл бұрын
Great tutorial! Very important video for beginner. Thanks a lot!
@ph3mmy136 3 жыл бұрын
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
@dsa-7015 3 жыл бұрын
thank you man you are a life saver
@GGSoft2009 2 жыл бұрын
That's why I love this chanel.
@tarcus6074 6 жыл бұрын
Thanks Brad. Cool as always.
@ishitamahatme9375 3 жыл бұрын
Thank you so much for this! :D
@sakinebarati7448 2 жыл бұрын
thanks a lot . I'm beginner in html and css and your channel is very helpful for me.❤❤
@mohanrajmuthusamy403 4 жыл бұрын
Awesome sir, I have learned lot of things on this video.
@chintandeshpande4025 4 жыл бұрын
Sir ... You are amazing.....plz keep posting more video's like these
@Joost1092 3 жыл бұрын
Awesome, thanks!
@priyaranjan1733 6 жыл бұрын
Thank you Brad! 'ease' is the default for 'animation-timing-function' not 'ease-in-out' @ 13:00 ;)
@shub.trivedi03 3 жыл бұрын
Best tutorial on animation and transition
@zrkmedia7417 6 жыл бұрын
You are awesome Brad
@MrThisistooeasy 5 жыл бұрын
loving your channel
@kodindoyannick5328 4 жыл бұрын
Very interesting. Thank Brad.
@desispinner7387 6 жыл бұрын
this man uploaded this topic when i need it the most
@Davijorge 4 жыл бұрын
This was a great tutorial. Congrats.
@crypticcoding9680 4 жыл бұрын
Thank you so much.
@craiggazimbi 3 жыл бұрын
Thank you Brad !!!
@SunilChris 4 жыл бұрын
Thanks a ton..it was a great help
@Ic9us 4 жыл бұрын
thanks for sharing.. great info
@jodyclaggett786 6 жыл бұрын
Dude, great videos!
@mokshaGyanRam 5 жыл бұрын
Awesome course thanks man
@GabrielRodrigues-br5qf 5 жыл бұрын
Oh my god You helped me a lot in my school. Thank you guy you're nut!
@pyroghost11 6 жыл бұрын
dude seriouesly your videos are the best!
@SonuKumar-yu6yh Жыл бұрын
Thank you Brad!
@joey1317 3 жыл бұрын
Thank you so much for helping me! You are a life saver!
@danilalingo9296 4 жыл бұрын
Great video!
@yashdeore473 3 жыл бұрын
this tutorial was very helpful thanks a lot 👍👍👍👍👍👍
@deathbell4965 5 жыл бұрын
Great video Learned alot thanks man
@wgd2441 5 жыл бұрын
thank you so much for this ,it helped me alot .
@xAndre-d-Moraes 6 жыл бұрын
Finally. Thank you!
@JosueOrNoSway 6 жыл бұрын
Boss as always bruh, way better than crusty plugins
@codeIMperfect 3 жыл бұрын
You built the Pyramids!!
@farmanfarman209 3 жыл бұрын
thanks its really helpful
BalcevMMA_BOXING
Рет қаралды 14 МЛН