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
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; } }
@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.
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
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
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😍
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!!!
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!
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.
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
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.
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!
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; ```
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!
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); } }
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
Hey Brad, this looks like a great video, but why do the tutorials never work as well as shown?! I noticed the "curly brackets" { and } are shown as white for me, and I wonder why did your file auto-update with CSS changes when the HTML file isn't shown to be sourcing the CSS from the CSS file? See 03:00 for 50 seconds. When you go back to the HTML file at 15:14, it does show the code linking to the CSS file but the vital step of linking the file isn't mentioned. I'm also typing everything the ling way around as I don't know any of the shortcuts, although some I'm figuring out.
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 :)
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 :)
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.
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); } }
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!
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Xc6G3oV24yE.html
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
