Up next in 10
I Will Never Write CSS Animations Again Without Using This Tool
5K views
Feb 7, 2024
Revolutionize your approach to CSS animations with this game-changing tutorial – "I Will Never Write CSS Animations Again Without Using This Tool." In this video, you'll discover a powerful tool that streamlines the process of creating stunning CSS animations, saving you time and effort. The tutorial showcases the tool's features and demonstrates how it can effortlessly enhance your animation workflow. Whether you're a seasoned developer looking to optimize your CSS animation process or a newcomer eager to simplify the learning curve, this guide provides valuable insights. Join this tutorial to unlock the potential of this innovative tool and elevate your web animation projects with efficiency and style. Say goodbye to manual coding hassles and embrace a new era of CSS animations that will transform your web development experience.
View Video Transcript
0:00
Well done CSS animations can really elevate your site to the next level, but it's quite
0:05
difficult to make these animations because it's really hard to actually get in there
0:09
and see exactly what's happening at every step of your animation. That's why I absolutely love the dev tools built around animations both in Firefox and Chrome
0:19
In this video, I'm going to show you how you can use both of them, not only to improve your own animations, but also to figure out how some of your favorite animations on the
0:26
web are done. Welcome back to WebDev Simplified. My name's Kyle and my job is to simplify the web for you so you can start building your
0:35
dream project sooner. And in this video, I'm going to start off really simple, showing you the power of these
0:39
tools and then moving on to more complex animations throughout the rest of this video
0:43
So to get started with this video, I have a really simple box that when I refresh the page, it spins and changes some colors using this animation code right here
0:50
Pretty straightforward stuff. And then I have a button that when you hover it, it just changes colors between white and
0:54
black and black and white. As you can see here, this is using a transition instead of an animation
0:59
And that's so I can show you the difference between animations and transitions inside of the dev tools
1:04
So in order to access these dev tools, all you need to do is just right click your page inspect, open your dev tools like normal
1:09
I'm going to bring them over onto the side here and just give us a little bit more room so we can actually see what we're working with
1:14
And then what you need to do is you need to click on these triple dots, at least if you're in Chrome, that's going to allow you to go to the more tools option
1:20
And at the very top, you're going to see it says animations. I'll just zoom in here real quick, so it's a little bit easier to see what's going on
1:25
on my screen so you can see more tools and then click on animations. That's going to pop up this animation drawer in the bottom section
1:31
And if you want to be able to see this in a full screen view, you can just right click, click move to top
1:35
And now that's going to move it to this top section. So I have essentially have a full screen animation view
1:39
And the really nice thing is any animations that occur on my page are going to be tracked here
1:44
So if I refresh my page, you can see the box spinning shows up as this animation right here
1:48
And now if I hover over my button and unhover, you can see I have two different animations showing for the hover and the unhover effect
1:54
But the real power of this comes in when I click on one of these animations. For example, let's click on this button animation
2:00
You can now see that that entire animation and all of the key frames are broken down
2:04
into this one section right here. And I can mess around and change this animation if I want
2:08
The only downside to this inside of Chrome is if I do try to click to change this animation
2:12
you're going to notice it brings me to the element tab and highlights the element that's being animated
2:16
That's because they generally expect you to use this animation tab at the bottom. That way you can view both your elements and your animations at the same time
2:23
So I'm going to bring this up as large as I can possibly make it. That way you can see that I can drag around and change around this animation
2:29
For example, I can make it much quicker. Let's make it about 250 milliseconds. And now I can click this button right here, which allows me to replay my animation
2:35
And you can see it replays much quicker than it did before. Or I can make it much longer
2:39
Let's say that we want to make it, you know, 15 minutes or whatever. I can click replay and you can see it looks like it's not moving because the animation
2:44
is so long. And I can drag this along and see exactly what's happening every single time
2:48
And if I want, I can even pause and play my animation like I'm doing here. Now if I speed this back up so it's quite a bit quicker, so it's a little bit more of
2:54
a normal animation. I'll bring it back here. I will just make it even shorter. There we go
2:59
Actually, let's just refresh it completely by going to one of these other animations
3:03
and then coming back to this one. There we go. So now we're back to mostly what we had before. You can see it's now 4.5 seconds instead of one second
3:08
But the nice thing is, what if I wanted it to be slower? For example, what if I wanted to be 25% of normal speed to really see what's going on
3:14
I can click 25%, redo, and now you can see it's running at a quarter speed. Or I could do it at 1 tenth speed
3:19
This is really great for a button, for example, where it's a transition. You can see it's transitioning between dark and light
3:24
And at 100% speed, if I replay this animation, you can see it's so quick I really can't tell
3:28
what's going on because it's only 100 milliseconds. But I can just come in here. So now it's saying 10% speed, so now it's going to take one second
3:34
And I can really see what's going on at every step of that animation. And the really nice thing is, since I'm using transition here, it's broken down into each
3:40
property that I'm transitioning over. While this box animation, since I only have one animation on the box, which is called
3:46
rotate and change color, I just see that one animation. Now if I had other animations on this box or other properties that are animated at the
3:52
same time through transitions, those would all show up on here as well
3:56
But for now, all I'm seeing is this one animation because that's the only thing occurring at this time in my application
4:01
Also if I want, I can pause all animations by clicking this pause button. And now you can see when I hover my button, it's actually not causing it to animate
4:08
And that's because all my animations globally have been paused. And this timer actually changes all animations
4:13
For example, when I hover my button, it's now at 10% speed because I've changed this to 10% here
4:17
So you can really play around with all the different animations and exactly what's going on
4:21
And just being able to scrub through them is really nice. Change around where your different key frames are going to be
4:25
For example, you know what, I want it to be less time at this color right here. And I can do that by just moving around these key frames
4:31
Same thing here with these ones for the text. I can say, you know what, the color is going to take longer than the actual text to animate
4:36
Now if I go to 100% speed and I go and I play this animation, you can see that it takes
4:40
much longer. And I can maybe especially span this out even more for the color to actually transition
4:44
versus everything else. Now if we move on to a slightly more complex animation, I can show you some other stuff
4:48
that goes on. For example, here I have this loading spinner. There's just two of them showing up and you can see that there's a lot of stuff going
4:53
on with this animation. So I'm going to inspect the page. I'm going to go over to that animation tab by just going over to, actually it's already open
5:00
So we don't need to bother with that. I'm just going to refresh my page because these animations are on load. As you can see, there's my animation
5:04
So if I click on it, you can now see there's a ton of information being displayed down here
5:09
And what I can do is, there's a bunch of different elements that all start animating and animate during the exact same time period
5:14
As you can see, all of these different elements as I hover over them are all animating at the exact same time
5:18
So like my text, my different spinner elements and so on, they all started the same animation at the same time
5:22
So I can actually play around and see all those different elements all at once. So I can say, you know what, I want one of these to spin a lot faster
5:28
So I'm just going to shrink this down. And now you can see that this blue bar is spinning way faster than the red and the yellow
5:34
bar just because I've increased the rotation of that to be much quicker
5:38
And also, since this is a repeating animation, essentially it repeats an infinite number
5:41
of times, you can actually see where each repeat is by these different nodes
5:45
And if I had more than one keyframe, such as down here where I have text color, you
5:48
can see these empty nodes are essentially the keyframes in my animation
5:52
And the solid colored ones are the start and the end of my animation. And since this repeats, you can see I have dark colored nodes every single time my animation
5:59
starts over. Now I can do as much modifications and editing as I want inside of here
6:03
And the really nice thing is all the changes I make, you can see they pop up up here. It's inline style
6:07
So you can see my animation duration has been changed and my animation delay has been changed
6:11
And if I change around other things, for example, this text color one, I'm going to mess around with some keyframes and maybe I'll mess around with like, you know, the different values
6:17
for the duration, all of that's going to be kept in those inline styles. So it's really easy for me to actually go ahead and change these and then copy and paste
6:23
those changes over. But mostly the nice thing about this tool is it makes it really easy for you to see
6:28
what's going on and what all properties are being animated by just hovering over things and be able to slow down your animation speeds is super, super helpful, or even just straight
6:35
up pause them to see what's going on and then to scrub through them to see exactly what's going on at each phase in your animation
6:40
That's what I really love about these dev tools. Now I want to go to an even more complex animation
6:45
If we move over here, this right here is essentially the prettier logo. And I created this in a video
6:49
Same thing with this video. This is a video that I've created. I'll link it in the cards and description for you
6:53
Same thing here. This prettier logo. It's a video I've already done on how to make this animation. I'll link it in the cards and description for you
6:58
When I refresh, you can see that it gives me this style of animation right here
7:02
And when I click on it, it does this kind of cool animation as well. So if we wanted to see what was going on, obviously we should inspect it and we should
7:07
go to the animation tab. And let's just make this a little bit smaller here. And now if I refresh my page, you can see that I have this big animation showing up
7:14
right here that kind of is saying all these different rows are loading. So if I click on this, you can see I have all the animations and everything showing up
7:20
Dashed lines are essentially saying that some things are waiting because there's a delay in this animation and so on
7:24
You'll notice when I replay this animation, the right hand side actually doesn't change
7:28
And this is where I want to talk about some of the caveats of this actual tool. So to explain what's going on, I'm actually going to use the exact code from this tutorial
7:35
and you'll notice that the animation that is running is called load row and load row
7:39
is a animation that has no start frame and at 100% it changes the translate to zero
7:44
The other really important thing to note about this is where this load row is actually used
7:48
If I just search for this real quick, you see it's used right here on the row that it
7:52
has a forwards property set. So the way that this animation works is on page load, my translate is set to some offset
7:58
value, for example, like negative 100 pixels. And then my load row is going to be running
8:03
And since my animation is set to forwards, it means whatever value is set inside this
8:07
animation, which in my case is a translated zero is going to be the new value for the
8:11
translate property of my actual row. So instead of having a translate of negative 100 pixels, the new value is going to be zero
8:18
And that's how this animation works. The problem with this though, is when I try to replay my animation, my current translate
8:24
property is zero and I'm animating to a property of zero. So obviously my animation does not replay properly
8:30
So if you have animations that change around properties, but don't have like a starting place for it
8:35
So if I come back to this load row, you'll notice that there is no starting key frame
8:39
The starting key frame is just whatever the current value of my load row is. And in my case, my current property value here is going to be zero because I set this
8:46
to forwards. It's not actually going to repeat properly. The way I can get around this, if I wanted to, is I can come in here and I can go to
8:52
my animation and I could set like a 0% key frame to set my translate to the offset value
8:58
And now you'll notice my animation still plays exactly the same. But when I try to rerun this, it's going to work a little bit better
9:03
For example, if I click rerun here, you can see that they're actually animating. They're not animating exactly as I expect because it's waiting until the animation starts
9:10
before it actually sets that property to that offset. One way I could get around this is if I go back to my load row here and instead of using
9:16
forwards, I use both as my direction here. Now that's actually going to fix the problem
9:20
So my animation should repeat properly when I try to refresh it. So I come in here, do a refresh
9:24
You can now see it reset back to the normal state. So this actually kind of helps me debug certain problems because maybe my code would actually
9:30
be better written if I used a style of animation like I just did, where I started at 0% and
9:35
went to 100% instead of relying on the default value of that property. That may give me a more robust animation, especially if I need to replay that animation
9:41
later instead of just doing it on load like I'm doing currently. Also you'll notice when I click on this animation, it does another big, cool animation
9:49
Right now it's not working super well because of certain things that I have in my animation code
9:53
So we just need to swap that back to what it was before. So inside here, if we just undo all the different changes that we have done, get it back to
9:57
what we had before. Now we can minimize that down. And when I click on this animation, give my page a full refresh
10:03
And now here, if I click on this, you'll notice it moves all the rows out of the way and then moves all the rows back in
10:08
And I can actually view this animation. You can see exactly what's happening with each one
10:11
And for example, I can make certain rows go a little bit faster by saying, you know what? That one's going to slide way faster
10:16
And now if I want to be able to scrub around, I can see exactly what's happening. And you'll notice that this one row is going to be sliding
10:21
As you can see, it's this row right here with that pink. It is sliding away much faster than all of the other rows just because I sped it up right there
10:28
So that's really something interesting to be able to look at. And again, it's really nice to be able to pause my animation or play it at a slower speed
10:33
So when I click, you can see exactly what's going on with each one of our rows in depth at this slower speed
10:37
And you'll even be able to see that this row right here is going to zip away much quicker just because I have that slide speed set faster
10:42
Now another thing to mention before the end of this video is that Firefox also has really
10:46
cool animation tools as well. And it's even better than Chrome in certain ways, but I personally don't like it quite
10:51
as much. So the way that this works is whenever you've selected an element, for example, the head
10:55
body, whatever it is, you can go to this animation tab right here. And then anytime there's an animation that happens on your page that is a child or this
11:01
current element. So if there's an animation on the body or any child of the body, it'll show up in here
11:05
So if I refresh, you'll notice I get my box animation. Now the really nice thing about the way Firefox does it, as you can see down here, I can see
11:12
all the different properties that are being changed inside my animation, for example, my background color
11:16
And it's even giving me like a view of exactly how those properties are changing throughout that animation
11:20
Same thing with rotate down here. It's showing my rotation across all the different key frames
11:24
The one downside is I can't change any of these properties. There's no modifications at all I can make
11:29
And another really annoying downside is sometimes when you're navigating around. So like if I click on my box, now my animations disappeared completely
11:35
Same thing if I go back to my body, I have to refresh to get that animation to show up. So it's not ideal
11:39
Also, if I'm clicked on my button, for example, and my box does an animation, it's not going
11:43
to get picked up because I'm not clicking on a parent or the element that's being animated
11:47
So that's another big downside. Same thing here. If I go to the test button, you can see if I animate over this, you can see I get properties
11:52
for the color and background color. And it really shows me exactly how those are changing between their different values
11:57
I have the same ability to slow down and speed up my animations and play them and restart them
12:01
I just find that it's not quite as nice as the tools inside of Chrome. So I prefer Chrome in this regard
12:06
But Firefox has really nice tools. So if that's what you use, they're also there. Just make sure you go to this animations tab
12:12
Now if you want to learn how to build that really cool, prettier logo animation at the end of the video, I'm going to have it linked right over here
12:17
Or if you're just getting started with animations, I have a full crash course covering everything
12:21
you need to know about CSS animations. It'll be linked right over here. With that said, thank you very much for watching and have a good day
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Fun & Trivia
#Online Goodies