Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Single keyframe tricks are magic
663 Plays5 months ago
What can you do with a single CSS keyframe? A metric ton.
0:00 - 50% keyframes are magic
0:49 - Animation is easier than you think
2:17 - Why at 50%?
6:51 - Trick 1 Shake
12:00 - Trick 2 Pulse
23:25 - Trick 3 Glitch
27:55 - Trick 4 Flip
32:45 - Trick 5 Fill
41:20 - Trick 6 Sheen
44:25 - Trick 7 Emphasize
46:50 - Trick 8 Censor
48:35 - Trick 900 Tony Hawk
Links
Bad at CSS - https://twitter.com/badatcss
Adam Twitter - https://twitter.com/argyleink
David Twitter - https://twitter.com/_davideast
Codepen Demo: https://codepen.io/davideast/pen/MWxvzjm
Open Props: https://open-props.style
Recommended
Transcript
Introduction to Single Keyframe Animations
00:00:00
Speaker
What can you do with a single CSS keyframe? Turns out, quite a lot. With one fundamental understanding of the way CSS keyframes work, you can easily create animations that not only look great, but enforce a real emotion or interactive feedback. With one keyframe set at 50%, you can tell CSS to animate from an initial property to the value at 50%, and then back to the initial property again.
00:00:26
Speaker
The cool thing about a 50% animation is you say go somewhere and you don't have to say where to go back. This idea unlocks a whole realm of possibilities with just a single
Exploring Single Keyframe Techniques
00:00:36
Speaker
keyframe. We're going to show you nine different single keyframe techniques and dive into what they're useful for and how they work to begin with. Let's get started.
00:00:49
Speaker
So Adam, I spent the other night, uh, instead of sleeping, which I should have been doing, I didn't, I didn't sleep instead. I, this is a very true story. I was just like, you know what? I want to know how simple can I make a animation with CSS? Because for the longest time, I've always thought that animations are really difficult and not because the code is difficult. Don't be wrong. When you get into other things, it can be very, uh, wild and crazy. But the thing that I have always found difficult about animations are that I'm not an
00:01:19
Speaker
animator I have no ideas behind like animation to me has always seemed wild you know when you see people do through the flip books like I couldn't even do that so so the thought that I have to you know apply that into the web world to me is a little nuts so I thought to myself let's break this down let's make this really easy I'm gonna challenge myself to do one single keyframe and from this one keyframe
00:01:44
Speaker
How much can I do?
The Power of 50% Keyframes
00:01:46
Speaker
And I have done this in the past. I sent out a, uh, a tweet about the Viet logo blur and how, and I had it like pulsing in and out and everyone was like, well, it's so crazy. How'd you do that? And I was like, one key frame. Um, and so I found like, you know what, this is, uh, there's actually a lot of power here. So in today's episode, I want to cover a bunch of tips about what we can do with one key frame and specifically one key frame at 50%. And.
00:02:13
Speaker
Adam, we want to break down to us why a key frame at 50% is important or is just useful.
00:02:20
Speaker
Yeah, I use this one all the time for infinite animations, especially so if you want to ping pong an animation where it goes somewhere and comes back and goes somewhere and comes back. The cool thing about a 50% animation is you say go somewhere and you don't have to say where to go back. That's what zero and 100% are going to be naturally. So it's going to rest back at the whatever styles it has and just the normal flow.
00:02:44
Speaker
But in the middle of it, it's going to go to some destination and return. Go to a destination and return. So it's a really quick way to make an infinite animation that can go back and forth forever with just one definition. And you can take something, yeah, from where it is naturally to somewhere cool back to its natural resting place.
00:03:03
Speaker
And when I was going through this, cause I noticed that all these incredibly useful animations, one key frame, 50%. And in many cases, just one property you just transform. And, uh, which is even cooler. I asked myself though, why, why 50% why not 25%, why not 75% or any other percentage. And what I realized was upon tinkering that.
00:03:26
Speaker
There truly is no difference other than the balance. 50% gives us a nice balance. Like we start at zero, we go to 50, we hold until we get to
Fine-Tuning Animations: Easings and Durations
00:03:38
Speaker
a hundred percent. And then depending on what a property or what value you're using for like alternating, returning forwards and all that we may return, we may not.
00:03:46
Speaker
But it gives you that ability to do that. It's like very flexible, a very balanced key frame. And I realized that at 25% or 75%, you're just changing the velocity of when that animation happens. How quickly do we get to a translate Y? Or how quickly do we go to opacity? Or if I hold it 75, it's going to take a little bit longer. And that, to me, was super enlightening to consider it that way, because I realized
00:04:12
Speaker
These are all the numbers that we can fudge to make things go faster, make things go slower, and not just in the percentages, but also within how long does this animation run for. What is the easing function of this animation? And then it stops. I no longer look at.
00:04:28
Speaker
keyframe animations or animations in general, being like, okay, I have to set when this goes here because that seems like the right thing to do. And then I have to find the correct easing function. And then I got to get the time just right. I realized like, Oh no, I have all these levers to pull and it doesn't feel like a weird Jenga balance anymore where I'm pulling and putting blocks on and around. I'm like, no, no, no. I have so much space. Like I have more buttons and levers to press to achieve the effect that I want.
00:04:57
Speaker
This is a, there's a couple of really great thoughts out of that explanation that I want to
Common Mistakes and Minimalism in CSS Animations
00:05:01
Speaker
share. One of them is a lot of people, when they start building responsive design, they add widths to things because they look at a picture and they say, okay, this element looks like it's 400 pixels wide. I'll set 400 pixels on the container and then they'll go write some styles.
00:05:15
Speaker
And then when they need to go to responsive, they have to go redefine a width and then it becomes this slippery slope of like over defining your styles, which is a big beginner mistake. And the same thing happens with key frames. People over define their key frames and then they get ones that snap to stuff. And so yeah, I'm always looking at these online editors that are like, look at our cool grab and go animations. And they're always super duper handheld from like zero to a hundred percent. And I'm like, this is annoying.
00:05:42
Speaker
And that's why OpenProps doesn't have any of those. I think it only has maybe one or two. Almost all of them are single keyframe animations that I call them effects because you can also stack them together. You can compose multiple single keyframe animations and the browser will blend them.
00:06:00
Speaker
For example, a fade in can just be a single key frame. It says two opacity zero. Okay. Well, I guess that'd be fade out. So two opacity zero. And then you have another transform that's like slide out up and you put them together and they will fade out and slide up. So you have independent single key frame effects that compose into bigger animation. So it's like, it goes beyond just like
00:06:23
Speaker
being cool and that you can pack things into the beginning and pack things at the end and feel more nimble. There's a lot of cool reasons to use keyframes in this way. So I'm excited to see what else you got to share.
Practical Animation Examples and Techniques
00:06:34
Speaker
Yeah, I mean, it was a great lead and the, uh, for those listening to the pod, uh, I'll have a code pen link in the description. If you want to follow along, it all goes in this order. Um, and also for those watching on YouTube, we're going to have some screen stuff. Uh, so the first one I get to get into is I like the, like using it to shake to do like, I think that sometimes when you have like UI.
00:06:59
Speaker
And, um, you're trying to tell someone like, Hey, no, you can't do this. Like doing a little left to right shake. You know, it's like, Hey, shaky, shaky. Yeah. Shake your head. You're like, no, uh, no, it's not good. Now that's two of those two. We got a shake X and a shake Y.
00:07:13
Speaker
Yeah. Cause shake wise, like, yeah, you could do this. Yeah. Okay. Yeah. Okay. Cool. And you're like, no, no, shake, shake. Uh, X is like, no, shake wise. Like why not? Yeah. I used to have one on a form input when it's like, you got an invalid entry and wiggle it, you know, give it a little shake of, uh, uh,
00:07:30
Speaker
That's not cool. The way this works is at 50%, we will translate X a small amount. I have 20 pixels to say translate X 20 pixels, you know, positive X.
00:07:45
Speaker
But what I found is, is so the way it works is at 0%, we're, you know, translate X zero. So we're, you know, we're right where we started. Then at 50%, it goes 20 pixels over, and then at a hundred percent, it will return back. Well, it, uh, or just resets the state that is. And so.
00:08:03
Speaker
What is cool about this is if you do this in rapid succession, it's just this little shake that kind of goes, Hey, no, no. The thing about single key frame though, is, is that it's while it is a shake for, no, it's kind of like an off centered shake where, cause it's only ever going to go to the, you know, positive or negative direction. Yeah. It's almost like if you're a dance, cause it kind of looks like it's dancing on the screen right now, everybody, but it's like, instead of where you'd shake your hips side to side.
00:08:26
Speaker
It's only shaking its hip in one direction, almost like it's in the sixties and it's doing a little bop like a bop, bop, bop, you know? So you got to swing your hips to the right, to the center, to the right, to the center, bring it back to the center.
00:08:42
Speaker
shake it with that one key frame baby mmm oh wait I shook the other way oh crap I broke the keyframe all right well I'm not a robot and I'm feeling it so amazing yeah you need two keyframes though in order to center it like you need to start at maybe you do need like 25 or so this is probably the worst
00:09:01
Speaker
when to lead off with. Well, I'm also looking at the open props one and I'm like, Oh, the open props one. This is one of the few that there's like five key frames to find. Cause I do the full wiggle. I shake my hips to the left and the right. Uh, and then I also have a little pause. So it does like a, like a jiggy jiggy jiggy pause jiggy jiggy jiggy pause.
00:09:20
Speaker
Uh, that's, that is another thing that is, I think counterintuitive. Maybe this is a really good example to start out with because it like, why not one in this one? Why one and others and why not one for this one? In the fact that you have five, I'm not looking at it right now, but I assume that you have five because you need to pause motion, uh, at certain points in time is like you were saying, and that that's something I think is counterintuitive when you're first learning keyframes is that you need
00:09:46
Speaker
to keyframes in order to pause. And I think we're always looking at keyframes as, oh, I need to like over there and then over here.
00:09:57
Speaker
But a lot of times keyframes, it's like, get here and do nothing. Yeah. Like do less, do nothing. Yeah. And then, okay, now, now we're going. Like, so that's something that I have put into my keyframe. Which is a good time to talk about film mode also. Cause a lot of these single keyframe ones, the film mode becomes really important because you can say, Hey, do this animation and then stay there. It's like you tell the track head, if you were scrubbing on a video.
00:10:20
Speaker
to not go back to the beginning after the animation after the video plays you say no leave the playhead at the end I want the element to do this animation to somewhere and stay at the destination and fill mode is that's like towards infinite alternate like that that's that one yeah forwards yeah forwards reverse uh alternate yep this is why it's great having you on the pod because most people at least I imagine this how I am writing CSS is that you're like so especially one like animation where the
00:10:50
Speaker
like that values, there's so many parts to animation. And I'm like, well, there's the, there's the, the seconds one. And then there's the one where you name it. And then there's the one with the function easing function. And then there's the one where you kind of tell it what to do.
00:11:06
Speaker
Uh, and, and, and then, and yeah, that's, that's those are what they're called. And you're like, I work in the spec. I know exactly. That's the film. That's what this one, that's what that one. And I'm like, Oh, they have names. That makes sense. It's just been schooled so many times, dude, where I'm
Understanding Animation Properties
00:11:20
Speaker
talking to chromium engineers. I'm like, look at my animation. They're like, you could have done this one simple little thing, fool. And I'm like, dang.
00:11:27
Speaker
That's smart. I'm going to go look smart online now and share that as a tip circle life. Uh, yeah. So with this though, so we go left to right. Uh, first mine goes right. 27, 20 pixels and back, which I think if you do it quick enough, it's actually very difficult to tell that it's off centered. Um, yeah, it actually didn't really notice until you were describing it and I'm like, Oh, look, it is. It's just doing the one, you know, the hip pop from the sixties just.
00:11:55
Speaker
Yeah, that's cool. It's it. Uh, and so that one, I like that one. It's a 50%. But moving on to our next one, which is pulse pulse is my favorite one. I think out of all of them, because, uh, actually it's not my favorite, like one to look at, but I think it's my favorite in terms of practicality, because I find that pulse works really, really, really well for so many different.
00:12:15
Speaker
applications pulsing works really well for like, uh, animating, uh, like blurs and any type of shadowing or something like that. It feels very natural, but it also, uh, works really well for just emphasizing something, bringing it up. It's an attention getter. It's a very good attention getter. Yeah.
00:12:33
Speaker
And at a certain level of animation, it's timing or at the cadence of it, it changes, it's, uh, it changes its intention. So a lot of animations are like, Oh, that that shows speed that shows, you know, that it's chill. Like pulse does both. It can be like, if you have a high pulse, it's like, boom, boom, boom, boom, boom, like a heartbeat. But if it's really slow, it can feel like a wave, like a nice slow wave going through. Yeah. Like breathing. If you have the right easing, it can feel like,
00:13:01
Speaker
Yeah. Yeah. Totally do that. And this one being doing that.
00:13:08
Speaker
This one being a single key frame, all it is, is it's a scale. It's a 50% and I have mine scaling up to 1.5. And so it just kind of scales up, scales back, scales up, scales back. And yeah, it's just like you're saying, if you change, if we added more key frames in here, we could do things such as, yeah, the and hold and then release out really fast or something like that, or release out really slow. If it's like a more of a meditation exercise.
00:13:36
Speaker
Yeah. And you just learned too, uh, cause we're watching one of the GUI challenges with split text effects that you can change a key frame. You can change the easing in a key frame. And that's how I created those very calming breathing animations was there's an ease out on one of them and an ease in as it goes back and it does, it creates this very unique feeling. Um, and that's nice. It's a cool trick also.
00:13:59
Speaker
Yeah. Cause that one is, that one is terse and easy and hard to understand at the same time, because you are because, uh, that one, the way it works is I don't have it next to me, but maybe on the screen, I'll pull it up next to me. The way that one works is, is that you're changing the easing on each one of the easing function at different times of the brief of the breath. That is sort of a different key frame. So it comes in at one easing function and comes out on another easing function. Yeah.
00:14:27
Speaker
And from what I can remember too, is that because each split text, uh, by splitting the text, what we mean is take one P tag of text and chop it up into single characters that are spans. Let's chop up David. Let's chop up David. D A V I D.
00:14:44
Speaker
can spell my name. We're going to do arms and legs. Okay. Nevermind. So we go from one P tag to D A V I D five. So, uh, and then each one of those all, uh, were corresponds to an index. So a indexual index index. Well, that is not a word. I like it though. Uh,
00:15:03
Speaker
I'm going with indexual number and indexual in design. Sounds fancy. Someone in the comments, please let me know where, what word I'm looking for that I can't find right now. Uh, we were looking for the index. I'm not letting this go, am I? All right. So the, where each number, each letter gets an index and from there.
00:15:25
Speaker
you can apply an animation based upon each one of the indexes because that's what you did. You like had this sort of staggered, staggered. Yeah, exactly. Which is something that is very cool to see in CSS because that's something I would feel like, oh, I got to do that with like GSAP or something like that green sock because
00:15:44
Speaker
Like that's where staggered animations are very difficult to comprehend. And so you do that in a very small and terse way, which was very cool to see. Because you use the same animation, but with different index numbers, correct? Different delay. Yeah. So it's like everybody does a breathe animation. And based on your index in the thing, you get a delay times like 50 milliseconds or something. So each of them can be staggered in a custom way.
00:16:11
Speaker
And you use, and the index value is set with a custom property on each, each span gets a custom property value set. So CSS can then say, oh wait, use this, but instead of some fixed value, look at its index, uh, which is also an amazing use of custom properties. It's that's where it's like, oh, CSS is not a programming language, right? I'm just dynamically replacing values on a same function.
00:16:35
Speaker
Seriously, it's exactly like a function taking parameters and each node gets its own instance. Absolutely. Yeah. There's scope, there's parameters. Like, absolutely. That's looking at that. I was like, what? I know. Have you seen the sibling index and sibling count proposals that I made to CSS?
00:16:56
Speaker
Oh man, okay, so it's annoying unless you're in a templating engine to add those indexes onto the elements. So like if you're in vanilla HTML, you have to hand write them. So you have to say style equals dash dash i colon one. Then you go to the next element, you're like dash dash i two. You're like, this is ridiculous because it's the nth child number. Like I can select based on the nth child. Why can't I get access to that number? It so clearly knows what it is.
Advanced Animation Techniques: Sibling Index and Staggering
00:17:22
Speaker
And so that's the proposal is a function that you can call called sibling dash index, which will return, uh, the number of your aunt child value so that you could get rid of all those inline custom properties and replace them in your duration. And you'd say duration, uh, would be like, you know, 50 milliseconds times sibling index. And so you'd get the exact same effect without the noise in your markup.
00:17:47
Speaker
That is so incredibly helpful because yes, when you have like a whole like, you know, LI.
00:17:53
Speaker
The browser knows which LI it is when it's information that's there, and it's completely true. And then from there, you can do some sort of calculation or just any information based upon its index, because there are countless amounts of times where that's important, whether it's creating lists in split text, in carousels, all that type of stuff. Knowing which number you are greatly changes what you will do at that point.
00:18:22
Speaker
The other special thing to note is sibling count, which is like asking your parent how many other siblings are there. That way you know the totality and you know your own position and that gives you enough information to move forward. You can also do a lot of this with has. It's just, again, annoying. It's like select the end child one and then set a custom property. You can do it all in CSS and not the HTML.
00:18:45
Speaker
Anyway, yeah, this proposal did get accepted and it's in the specs now. And I think a Chromium engineer is going to work on it this year and we'll get these two functions. It got a lot of good support from Firefox saying it was pretty easy to implement some.
00:19:00
Speaker
Yeah. I mean, I'm not, I don't work on the browser spec, but this is one of those ones on paper where you're like, well, we have the information. Uh, this is a additive like function. Yeah. It's, and it's cached information. Apparently like they, they cache the indexes. So it's like, Oh, you just want access to the cash file. Oh, okay. Well, okay. Yeah. Sorry. I derailed you on the, we were in the middle of, you can change the easing in the middle of a key frame. Uh, and staggering with custom properties is super dope. Yep.
00:19:28
Speaker
Yeah, that is, uh, yeah. So with the pulse one, uh, you 50% translate in and out translate you. So 50%, you, you, whatever translate value you provide for, or sorry for scaling, that is.
00:19:43
Speaker
It will not translate scale. It will scale up or even, uh, Oh, I just realized I missed one for pulse. It goes up, but you can do shrink as well. You can do, uh, less than one for the scale. That's what open prop says open prop scales to 0.9 and you scale to 1.5. And so it's funny. We both have pulsing animations, but one goes away from you pulsing and one comes towards you.
00:20:07
Speaker
Yeah. Pulse that you would think, uh, post you would think would go more up. This is more of an elevated one because it goes up and back. Whereas shrink. Yes. Would go back and then to, to normal to base. And if you go beyond that, then you're really getting to a bounce.
00:20:25
Speaker
which you can't do with one key frame. Can't even do it with like two key frames. Oh yes, you can with using functions. That's bouncing props for you. And it's cool with the bounce ones. If you do, so you import the easings from open props. And if you say ease, so it's dash dash ease dash bounce three, you get three bounces.
00:20:49
Speaker
And if you do bounce four, you get four bounces, et cetera. And you change the duration to change how strong those bounces are. It could look like a heavy weighted item bouncing or a lightweight item. Yeah. Because I just realized, yes, you can, you can specify like five, six key frames to set where it, you know, bounces up and then kind of falls back with some gravity, but then also squashes in, uh,
00:21:13
Speaker
That is yeah, the squash aspect is incredibly important in a bounce animation because that's like the whole what is the 12 principles of animations that you know, the old school Disney book, which I for the longest time have been wanting to write a blog post. That's like, this is how you do each one of these principles in CSS. I'm sure it exists out there, but I don't want to know if it does because I want to write it.
00:21:34
Speaker
Yeah, I hear you there If it exists and someone's listening don't send me the article I need because then I won't write it and then I won't be able to be like I did that It's a it's a you're singing that usher song my way, right? Yes My way we say go
00:21:52
Speaker
Anyway, that song is, isn't that song like, uh, it's, it's, that song itself is, um, is derived from Frank Sinatra, which is a written song my way. Oh, it's not the same. Like, I don't think he completely. Now you can tell me this if we have any usher fans or Sinatra fans that there is, it's based off because he had the, um,
00:22:16
Speaker
I believe it's there. I'm about to get way deep. I'm hearing it. I'm hearing it now that you say that. I'm like, whoa. Yeah. I know the song you're referencing from Sinatra and I know this usher one. I'd never put them together in the music video too. And he does the dance and I'm pretty sure it's very Sinatra. Oh man. He was so cool. And he did that dance with his like big shoes, just like little steps, but they were all like fresh and he's on his tippy toe and just moonwalking in the rain. That was, this is why people come to the pod. You come from, stay for the usher analysis.
00:22:47
Speaker
Oh my gosh. So yes, the squash, that's where we were
Versatility and Unexpected Results with Keyframes
00:22:52
Speaker
at. So you could do that, but I realized that with CSS keyframe animations, you could do multiple to change the timing, the hold, the squash, all that stuff. But the linear easing functions, just in the same way we talked about earlier, instead of switching it with percentages, you can also say, hey, overshoot. And so by doing an overshoot with the keyframe animation, you effectively can set a squash. Yeah.
00:23:13
Speaker
Um, so yeah, we, we pulse or shrink by doing one key frame for scale. So either more or less than the base value of the, of the scale. And then one that I really like, and I think this is one that not a lot of people know about this effect. We've all seen it.
00:23:31
Speaker
But we don't always like, Oh, that's how that happens is the glitch effect. So with the glitch, I liked your glitch. It was minimal and effective. And it kind of made me upset because I've done glitch effects. And I was like, did I, I do it the hard way. Like, this is cool.
00:23:47
Speaker
I just, and I would like to say that I, uh, this was one of those things where you say, I'm going to set this value and see what happens. And you're like, Oh, that made a glitch. Okay. Sounds great. Like I didn't know that was going to happen. I wondered at a certain time, like, Oh, what would that look like? And so effectively the way this one works is it's a 50% key frame and does a transform of skew 180 degrees. And so that effectively kind of.
00:24:12
Speaker
Kind of like does this squash to the side, like double fold squash. It's kind of hard to realize, but what it does is it kind of flickers the whole image out flat. And when you do it really quick, it looks like it glitches out. And if we did it very slow, you would just sort of see it kind of go like, whoa, like here, let me change. Yeah. Almost like a plane in, uh, in 3d, that's like being rotated towards you. And all of a sudden you can't see it because it's thin. Yes.
00:24:41
Speaker
Yeah. Like if I go to the apply for glitch, I have it for 600 milliseconds, but let me change it to 6,000 milliseconds. And now.
00:24:52
Speaker
Going to it. Yeah, it, it's still, even at 6,000 milliseconds or six seconds, it still looks very glitchy. It kind of just goes like, boom, but it, you can see how it kind of flattens and turns. Uh, and if you do that very quickly, it glitches out and there's so many more additive properties you can put onto there to make it feel more like status made it six milliseconds. And it looks amazing.
00:25:19
Speaker
OK. All right. All right. Let's I am blown away at how cool and freaky deaky that looks, man. Oh, you are so right. That looks like some 1950s, like a hardcore cyber effect, dude. Yeah. Oh, my God. Oh.
00:25:38
Speaker
That's a CSS trick right there, dude. You need to get isolated. You need to code pen that and be like, look at what I did. And everyone's like, Oh my God, dude, this is very cool. Holy crap. Oh my God. What a moment. Wow. That is so cool. Well, technically it's so fast. I think the glitching is because it's so fast. The frame rate can't keep up. So it just is there's randomness in the loss.
00:26:06
Speaker
And oh, yeah. Oh, it's so cool. And it's readable on the button through. It's somehow still readable. Yeah. It's like the text is persisting through the visual flicker. But oh, dude, this is so cool.
00:26:21
Speaker
that would make a awesome hover effect. Like you just hover over that. And I bet you if you add some, there's some static effects, some noise that you could probably add in there or some like blurring on like a gradient or something like that. We're not the gradient, but on a, like a filter blur or, uh, you, yeah, you could combine it with like an after blur, uh, like an ass suitor element after, or before in this case, and kind of put some absolutely positioned div before it to kind of have a good like,
00:26:49
Speaker
So that's more like the one I made where I use clip path and I generate a very jaggedy messed up clip path and then just apply it through a bunch of keyframes so it like switches between all these like broken fragmentic masks and you animate it really fast and looks
00:27:05
Speaker
Like a glitch. And I think I do a skew on it. So I do a skew and some noise with some Sharpie. Yeah. Yeah. That's like, uh, that's the expensive one. You know, that's the, you know, it's from the generator. Um, yeah, that one's really good. Uh, mine is like the bargain basement one where it's like, it's not champagne. It's just sparkling key frames, but, but it does the trick.
00:27:33
Speaker
Um, yeah, that is awesome. I'm going to keep it at six milliseconds. It is much better. And it's not, it's obvious. It's oddly not annoying to look at. Like it's not annoying. Yeah. I would have assumed six milliseconds would be like nausea inducing or something, but this is like strangely harmonious and interesting.
00:27:54
Speaker
Um, yes. So the next one is the turn, the hover, the hover flip, as some
Creating Complex Animations: Card Flips and More
00:28:02
Speaker
people call it. And this one is, this one's a little complicated to understand because it involves perspective.
00:28:10
Speaker
Uh, and I'm trying to find the key frame for it flip. Here it is. Um, so I, so this has to start with a perspective set on it and perspective is one of those things that when you try to explain it, you will confuse someone even more. And also you will less understand it. The more you try to explain perspective, like that's how I, that's how I feel about perspective. I'm like, okay, so there's like.
00:28:36
Speaker
Imagine you're looking at it differently and then you just change the value of how you're looking at it differently. I don't know. Adam, explain to us perspective.
00:28:49
Speaker
I will try. The idea is it's essentially setting up a camera that has a distance and it also when you set perspective, you're establishing a 3D context where translate Z will all of a sudden have effect where things aren't flat anymore. They can rotate in a way towards you or away from you. And so yeah, you get this coordinate system that's actually effectively three dimensional and the perspective value
00:29:17
Speaker
Kind of changes how close your camera is to where the 3D plane begins and where your camera isn't. And so the farther away you are, the effects of the perspective have less impact on things. And the smaller your perspective, like the closer you could think about, like if you put a baseball card right up to your eye and you rotate it, it's going to go out of your peripherals and get really distorted. But if you hold it away from your eye and rotate it, you can see very clearly flip. And so that's a little bit of what perspective is doing.
00:29:46
Speaker
Yeah. So this has like a perspective of like 1000 set on it. So like, get like really far away from it. I think is, is that's kind of what it's saying. And that's the base perspective. So I've cheat a little on this one. Well, actually, no, I didn't cheat because I could still fit that all in the, actually, no, I do cheat because I would have to set a base key frame if I wanted to change that. So I cheat by setting perspective 1000, but it doesn't affect the arrest as far as I'm, are there actually, this is a great question for a CSS expert like yourself.
00:30:13
Speaker
What are the bad like gotchas if I kind of set perspective to whatever, you know, whatever high or low values and, uh, on some base element that doesn't need perspective set on it. Like what kind of things kind of be like, Ooh, it didn't turn out well. There's two, two gotchas come to mind. Um, I don't know all of the performance implications, but one of the gotchas is if you have, um, a perspective.
00:30:36
Speaker
and the elements are on zero, or maybe it's even if perspective is zero and it's not one, like you need a perspective value of at least something.
00:30:44
Speaker
the browser has been taught over the years to ignore a value of zero where it used to respect it, but apparently zero didn't make sense and you have to have at least some perspective to get the effect. So that's like, fukon number one. And the other change that happened over time was that you have to put preserve 3D, like the transform style preserve 3D on every element that's inside of the 3D space. And that's also new. It didn't used to be that way.
00:31:12
Speaker
Another thing people be like why I put perspective on my container and I thought I had the camera and the viewport this element hits it You got to trickle it all the way down. So people do a star selector now and they're just like everything inside of here preserve 3d and so with this flip it will uh you set the perspective a thousand pixels and then
00:31:31
Speaker
Uh, 100%, this is a hundred percent one because I'm going to the end here to do the full flip. But I think we did 50. It would just kind of flip the card up like halfway through and then go back. So not get to the full flip, but a hundred percent. It will rotate it, uh, 180 degrees to kind of flip it over. And then the fill mode just keeps going back and forth, back and forth. And this is a, this is, uh, the common way that people do like CSS card flips.
00:31:59
Speaker
And you used key frame 100%. And I really like the keyword to, which is the same thing as 100% as well as from, which is zero. And so like in all the open props ones, you'll see that it's like at key frames, do this thing to some value. And I just like that mental model where you're like, again, it's like a key frame effect. You're like, if I apply this key frame to something, I'm sending it to somewhere. I don't really care where it is now. I want it to go here when I give it this style. Um, and it just reads nice, I think.
00:32:29
Speaker
Absolutely. Yeah. I was still stuck in like percentage modes and I totally agree. Just, it reads like a real sentence, like flip from this or flip to this makes way more sense.
00:32:43
Speaker
Um, and then the next one, I like this one a lot, uh, the fill, because it works really well for like very simple CSS loaders and stuff like that. And depending on how you do the key frames, you can really do some cool stuff here. What I think is super interesting about this is, is that I was smart enough to do this without width. And that made me feel like I was like.
00:33:12
Speaker
Okay. All right, David. Look at me. I'm doing things. All right. I am a scholar learned CSS doctor. I don't know. I know some CSS. I understand some animation performance aspects here, and I worked within the constraints of them rather than being like, you know what? I can, because the key thing I'm getting here about key frames or about any animations in CSS. Nice pun.
00:33:42
Speaker
is that you can animate on many, many properties. However, the recommended properties are transform properties and opacity. And I don't know if there's anyone's outside of that. So transform properties are a lot like scale, skew, all the ones that we've seen so far.
00:33:59
Speaker
Anything that can fit inside the transform property, which now have their own respective properties as well. But anything that can fit inside that can be animated without real performance problems to an extent, and opacity as well. What else? Am I forgetting anything else? Or those are the main ones.
00:34:17
Speaker
Those are the main ones for now. In Safari, they do have GPU-accelerated clip path animations, which is super nice. Oh, that is nice, because I clip path animate things a lot. And I'm like, oh. Yeah, me too. And Chrome has worked on it a couple times. Well, actually, that's not true. Chrome has an open issue to fix it, which was getting worked on by Microsoft for like two years, and then they quit. I think it was an intern project of someone there.
00:34:40
Speaker
Yeah, so it's currently unresolved. But a lot of work had been done to it. It actually was using Houdini in the background. So they were implementing Houdini internally to power it, which was kind of cool. So it was off the main thread, clip path animations. I think they just had a hard time. I'm pretty sure, actually, here's a tip. When you animate to a percentage in a transform, it's usually not GPU accelerated.
00:35:07
Speaker
Okay. Which is, which is a gotcha, I think, because I almost always transform with a percentage. It's like one of its big values, right? It's like relative to the size of the element. That's exactly what you're talking about now. Yeah. And so it's annoying. And so it's like, think about all the slide out menus that are sliding out from the side zero to a hundred percent. Yeah. Apparently those aren't GPU accelerated most of the time because it's not as deterministic as a pixel value.
00:35:32
Speaker
Shakespeare. Oh my gosh. So you're in some ways, depending on how complex your animation is, you're better off calling, if you want to get a GPU accelerated, doing something in JavaScript to understand its width, like get client bounding, wrecked and our favorite method and getting the width, storing that as a custom properties to then be used in CSS to run the, is that impossible to run the animation? So therefore it can be GPU accelerated.
00:36:02
Speaker
Let's see. You don't want to run the animation on the custom property because those aren't GPU accelerators either. Even with the app property and stuff, those are all CPU bound animations. I think what you'd want to do is you'd want to measure it and add the key frame. Or if you're using JavaScript, use the wappy API. Wappy.
00:36:24
Speaker
Web animations API. Yeah, it's true. If you're already in JavaScript land, they're like, just, you know, that's one of those, uh, one of those few times where I'll be like, you know, just stay in JavaScript at this point. Like just, if you're already, if you're calling get client bounding, wrecked, the battle's lost. Like it's like, you know, this is a mid defeat. It's okay. Um,
00:36:45
Speaker
Okay yeah that's super interesting but with so with this one with Phil the way that it works is it's a 50% keyframe animation as well and we have a button and inside of this button we actually will uh actually how did I do this one exactly I gotta look this one is I believe this a couple of them are a little bit like snowflakes and I think Phil is one of the snowflakes one as well no actually no it's not a snowflake one
00:37:08
Speaker
The way that the fill one works is that we have a, yeah, no, this is like one. I don't know what I'm saying anymore, but the way it works is it has an after pseudo element inside of it. And the way it works is it looks like a loading bar kind of goes through the element. It says, click me on it. And then this red kind of loading bar goes over the top of it to feel like it's loading and then kind of falls back and then repeats over and over again. And the way it works is there's an after pseudo element inside of there, which that's the fill animation is running on that.
00:37:37
Speaker
And it's saying, Hey, I am certain percentage. Like, I think it's like 150% of the container, just so there's no like clipping or, you know, in and out or any weird border problems. And the way it works is it says, Hey, uh, translate yourself, uh, X to a certain point. And that looks like it loads all the way up and then go back. And.
00:37:59
Speaker
And instead of using width, which is the whole thing we were talking about GPU acceleration and all that, which apparently I'm not getting anyways. But the whole point is, is that with width, that's not something you're really supposed to, you know, that's sort of like a hand slap. Like don't do that kind of animation. You want to try to do something else instead with transform property. So this does sort of gives you the same thing where it looks like it's increasing in size, but it's not increasing in size. It's just moving a bar. Like a sliding door. Yeah. Yeah.
00:38:29
Speaker
Yeah. And those are things that the dev tools are incredibly important for because there are so many animations. Like one we'll see upcoming here soon that kind of like, if you don't know how web animations work or how like some of these tricks work, they look like magic. You're like, but how do you get the thing to move like that? And then when you see that it's just really all like smoke and mirrors and somebody with like all the wires, you're like, oh, that's all that's happening. Like it looks like a real magic show. And you're like, that's crazy. But if you saw the way it worked,
00:38:55
Speaker
You would say like, Oh, that's not that hard. Uh, but I felt good about myself because I remember don't, don't transform on or don't animate on with let's, let's, you definitely did it right there. Yeah. All right.
00:39:08
Speaker
But I'm looking at it. I'm like, I wonder if scale X would have been better because then you wouldn't have had to worry about being twice the width. Yeah. Actually, just be fit. I'm curious. Just increase the oh, yeah, because it would you could do some really cool things actually with scale, especially if you like kind of round out the element, you can feel. Yeah, you're right. Now that I think about it, scale X will give you a very similar it would change the way that it
00:39:35
Speaker
Yeah, you have to change the transform origin. I'm almost done hacking your animation here. Oh, now you really. Oh, shit. You know what you could do is you could have it fill in one direction, flip the perspective origin or the transform origin to the other side, and then it would scale out the other way.
00:39:55
Speaker
So it would be like boop and then boop and it would come back in. Boop. Oh, cause the transform origin says like, Hey, okay. Now do it scale from the corner. Oh snap. I'm going to try it. This is an awesome lesson though, dude. I also love your use of inset here. It's very cool.
00:40:13
Speaker
Oh, yeah. Yeah. Inset is one of those things that when I first learned it, I was like, Oh, that's very cool. And then just like we've said with all the other CSS episodes, uh, which is every episode of this podcast is that, Oh, I'm not going to use that now. And then the other day I was like writing out like all the like top zero left zero. And I was like, wait, what am I doing? And then I set inset to zero and it just clicked right in. And I was like, Oh yeah.
00:40:36
Speaker
That is nice. What have I been doing? So I've, I've converted myself fully. My finger, my muscle memory is all on inset now. I have, I'm a, I'm a big fan. Awesome. The, uh, as, as you whip that example up, I'll move on to from Phil to the next one that I think is so interesting is Sheen. Sheen, Charlie Sheen over here. Yep.
00:41:03
Speaker
I, and I did not come up with Sheen myself. Uh, I didn't come up. I think a lot of these, even if I quote unquote came up with them myself, someone else is like, uh, Simpsons did it. Um, I have been meaning to put shine into open props. I'll send you my prototype.
00:41:20
Speaker
And I'm getting the, so this is a pseudo-element, too. Oh, yes, I have the pseudo-element on the page now highlighted, showing what it's doing. And the way that Sheen works is you have a pseudo-element, much like how we just had to do the translating on the width, instead of doing width, that is, on the pseudo-element for after.
Visual Effects: Sheen, Shadows, and Blur
00:41:41
Speaker
And this one takes this rectangle,
00:41:44
Speaker
Uh, that sets a gradient that appears kind of like bright, like you're shining a light on something. So it sets a linear gradient on this one and it turns the, the kind of rotate Z 60 degrees and translates a little, and then to kind of gets it into this little position. And then what it is doing is, is with the key frame, it just moves it and just kind of quickly goes, and so the moving the.
00:42:09
Speaker
uh that rectangle kind of works like flashing a light really quick across and so it gives it that whole light shing but all it is is just linear gradient you know properly colored linear gradient on a rectangle just going back and just repeating that animation over and over again you could even do uh alternate so it'd go up and then it'd go back down
00:42:33
Speaker
That would be more like a, oh, that'd be like a windshield wiper. Cause I was like, that wouldn't be like a sheen cause the light only goes for that one way. Got to clean the dirt off the window. Yeah. But you could totally do that. You could build like a windshield wiper sort of effect with that. Uh, if you, but by alternating cause you'd change it and kind of go.
00:42:50
Speaker
Oh, I'm going to look into something like that. Okay. So yeah, that one is, I think that building this Sheen animation is, I think like super foundational to learning all these little tricks. I got this one from CSS Animation Rocks, which is like one of the, has been a
00:43:08
Speaker
long stay of showing really cool stuff. It's been around for, I don't know if it still does episodes, but like, gosh, it feels like almost 10 years ago there, there was stuff out from there. And I found that one and I was like, Oh, this one's good. And one key frame.
00:43:23
Speaker
Delightful. Mine is not one keyframe. Well, it is one keyframe. It's background position X, but I did a gradient sheen. So where I made multiple stripes that are kind of semi-transparent, and then I animate them across the element when you hover it.
00:43:39
Speaker
Okay. Cause it's kind of like, yeah, you take, you think about a background image. It feels very fixed, but if you animate the background image, it's very much like having a pseudo element. Um, except mine doesn't go over the text. So my shine is behind the text. Yours is above it, which kind of means yours is probably better. Um, but I don't know what you want. Yeah. Yeah.
00:44:00
Speaker
Uh, and we've, when you do it fast enough, a lot of times that stuff just becomes minutia that like only the, the fine artist, like the artistry notices where they're like, like, you know, that's one of those things where it's like ship, you know, just ship it and then, and then fix it later or change it later. It's not even a fix at that point. It's like modified to the opinion.
00:44:22
Speaker
Um, the, uh, the next one, I love this one cause it's so simple and it's really trendy right now. And I call it the emphasize cause I was going with all these, like, you know, I was going with a certain name convention, but it's effectively animated box shadow. Start with like a real tight box shadow, which this button has, and then increase the blur on it. And then if you do that and sort of at a 50%, it works just like a pulsing, but it's like a box shadow pulse. And it goes like, yeah.
00:44:49
Speaker
And everything with box shadow neon, all effects are super popular now. And so this is a super easy one to do. It just kind of goes. And then there's so many ideas that I have for this. I was, I didn't have time to fully do it, but I wanted to. Put some of the radial gradients in this one for that would break us out of the box shadow, but using, um,
00:45:12
Speaker
an after element, or before element in this case, I could position something behind. Actually, I would have to create something a little more complex, but in one way, positioning something behind the button and then using filter blur to get it to look as if it is a box shadow, but it's really just a pseudo element that gets blurred out.
00:45:30
Speaker
Using a radial gradient on that with multiple colors around it can be such a cool effect. And if you're really good at lighting coloring, you could even have it look as if the light is being, like, shined on it, shown shined on it from some direction. English is hard.
00:45:51
Speaker
Uh, and so there's this trick is you can do this very simple one and go very far. And if you want to get even fancier, you can go there as well. So there's so much time that can be spent here. And I think a lot of well spent time given the design landscape we're in. Yep. Agreed. And radial gradients are super cool. I just got to know the syntax can be tough. Yeah. Go to gradient dot style. If you want to check out some of the coolest radial gradients.
00:46:19
Speaker
And I go there all the time just to position stuff and realize the syntax. I'm like, I know I can make a circle gradient. And if I put in the top right, and then I changed the size, how do I specify all that crap? And then I just go there and I go, oh, there's the code I need. Thank you very much.
00:46:33
Speaker
For those unaware, Adam made gradient dot style. Anything with like a dot style URL nowadays that you're click on on Twitter, like it's probably 80% of the time. I do like those. I have a whole bunch in the hopper too. I just bought a bunch and I'm like, Oh, maybe making this dot style or that dot style.
00:46:50
Speaker
Uh, now this next one is one of, is probably my like low key favorite. And that is this blur one, because it kind of turned out really nice. And now that we, uh, you know, talked about, especially some skew, I kind of have all these ideas for it. So this is a 50% key frame animation and it does a transform skew 45 degrees, but sets a blur of 20%, uh, the 50% key frame. So kind of cues blurs, and then comes back into place. Yeah.
00:47:18
Speaker
Uh, and it just, I don't know. I'm like, what do you think? It's simple. And it was a really nice touch on there. Yeah. Um, it looks really good. So open props has a couple blurs too. We also have a, a light mode blur and a dark mode blur. Yeah. Which yours doesn't seem affected by. I'd be curious to go test it. Like we had to do that because, um, anyway, it was just like a thing that you have to blur towards white or blur towards black. I think was our issue. Let me see.
00:47:45
Speaker
Anyway, you're such great. So I'm like, Oh, this is a nice blur. Yeah. Sometimes things just work out, you know, but I like it. It just, it's gives it, and it feels like a real, like kind of fun sensor blur to it. And that can make a very cool hover effect or something like that, depending on what you're, you're looking for. It's, it's a little over the top, but it doesn't feel too over the top. It feels like I can find a spot for it.
00:48:06
Speaker
Yeah, it looks nice. And I'm looking at ours. So what ours does in open props is it has a little bit of a light burst that's attached to it. So we do filter brightness and blur. Um, and so that kind of gives it this, uh, really warm sense. Uh, and it just slightly changes the way that the blur happens and it's kind of cool, but it did have an effect where we had to do a dark mode and a light mode version, uh, because that brightness changed depending on the theme of the site. Right. Well, this last one.
00:48:36
Speaker
is, uh, the coolest one and the most useless one, but it's the same to maybe.
Fun and Quirky Animations
00:48:41
Speaker
And this is the, the Tony Hawk. Just, you know, spin it, rotate it 900 degrees. And it just does a little 900 just over and over and over again.
00:48:52
Speaker
And, uh, I don't, I just thought that was funny. So I put that in there. Cause I was going at rotations and I was doing like, I was like, Oh, I'm gonna do a seven 20. Then I was like, Oh, I'm going to do a 900 and call it Tony Hawk. And it's just over and over again. Uh, and yeah, that I don't know where I'd ever use that one, uh, on a button especially, but I don't know. I just, I had to put it in there. Yeah. I mean, it's cool. And yeah, the name totally makes it. These are all awesome though, dude. Very cool work.
00:49:21
Speaker
Thank you. I know I had a lot of fun with this. I think that the beauty of all this comes out when you are able to say, let's, let's constrain, constrain ourselves one key frame and let's where we can try to stick to the transform property. And from there. Press all the other level levers. You can, you can do 25%, 50% is balanced and works out most of the time, but not all the time. And there are so many different ways to say, I'm going to.
00:49:45
Speaker
Drop the key frame here. I'm going to switch the timing to this. I'm going to switch the, we didn't even get into easing functions. We'll probably need a whole episode. Yeah. It's like you use the open props ones. I see a couple of Springs in here too. And I'm like, Hey, yeah, the elastic ones are in here. They're really fun and add a nice subtle touch to an animation. Don't they?
00:50:01
Speaker
Yeah. If you are looking at just building the, like you want to challenge yourself to do some sort of the key frames, say I'm going to pick one key frame. I'm going to go out to open props, use the easing functions in there. There's a whole set. Just drop those custom properties in as your easing function and watch how they respond differently. It's super fun. Change the timings up on things.
00:50:20
Speaker
I had no idea how a lot of these were going to turn out and I just put different values in and tweaked and tweaked and tweaked. And eventually I was like, that
Encouragement for Experimentation and Discovery
00:50:28
Speaker
looks cool. And even what I thought I was done when you switched the skew, the glitch one down to six milliseconds, we just found something even better. So the whole point of this exercise is, is that.
00:50:38
Speaker
It kind of shows you how keyframing and how CSS animation works and how really the littlest bit of what you can do not only takes you so far, but it also takes your understanding of how this works so far. It makes you proficient enough. Like I feel like if someone was like pop quiz, CSS keyframes, I feel like I'd be like, okay, we ain't going to bomb this one. We're going to be good. I'm going to C plus at least. All right, let's go.
00:51:07
Speaker
Mike dropped though, dude. What a nice recap. Cause yeah, you do, you want the smallest amount of code to manage, right? Cause then it's going to rot. You have to maintain it. You can get the effect that you want with this subtle insertion. And then, you know, the final kicker here should put these behind reduced motion. And now everybody's happy. Um, and just two, two little mentalities, which is only apply it if they want it and be as subtle and minimal with your code as possible to get the effect. And boom, everybody wins. Um, very cool, man. These are so rad.
00:51:37
Speaker
Yeah. Well, everybody, that's all the key frames we've got this time. Let us know other topics, other key frames, drop down any co-pens in the links for whatever thing you're watching on. We love to see them. We love to see the things you've iterated on and we will see you all on the next bad at CSS podcast.