Keyframe Animations Example

[00:00:00]
>> Jason Rodriguez: So inside of this CSS animations.html file, I set up a keyframe animation called fade-in. So that's the name of that animation that we're gonna call later on here. So we have this from state, which is our starting state to this end state. So we're just fading something out.

[00:00:18]
So we're gonna rely on the CSS opacity property. This first thing we're gonna do is set the opacity to zero. And then I wanna add this slight scaling effect so that this is gonna work on our images our logo and our hero image. So both of those are gonna start a little bit smaller and then fade in and get a little bit bigger to their intended size.

[00:00:36]
So we can use a transform property, which again takes a whole bunch of different values. This one is taking the scale value, which will scale both the x and the y axes. So we're setting it at 0.8. So 80% of its final intended full size and then we wanna get to that full size, that full opacity.

[00:00:55]
So the n states this opacity is equal to 1, and then transform scale is equal to 1. So that's the full opacity, full width and height of those images. So we're doing this on two different elements. You could very easily just have a single fade class that you apply across elements.

[00:01:13]
But I wanted to stagger this a little bit so that the logo loads a little bit quicker than the hero image. So it kinda has this graduated animation across those two elements. So I set up two different classes this fade one is applied down into the logo image you can see class="fade1".

[00:01:33]
And then fade2 is applied on that hero image and outside of our email. So then we use the CSS animation property. We set it to one second for that first fade, and then we call that name, that word. Well, we set it to one second, we call the name fade-in, which is our animation.

[00:01:50]
And then I set the iteration, the count number for that animation, to only happen once so it's not repeating. So if we didn't have that, then it would keep repeating that fade in and fade out, it's a really jarring experience. But we don't want that happen, so we only want it to happen once and it ends on this last ending state, that two state.

[00:02:10]
The second fade we're gonna make that a little bit longer to give it that staggered appearance. So we're gonna set that animation duration to two seconds and then only make it happen once and again it's using that same starting and ending state. So if we open this up here and you can see hopefully quickly those two different images, kinda has that staggered fading in approach.

[00:02:33]
So it's subtle but it's one of those things that when you're opening this up in the inbox, it catches your eye. It's subtle but it's a nice experience for people. And it mimics a lot of I feel like you see this behavior a lot on web pages now, that kinda loading animation, that lazy loading animation.

[00:02:52]
So it brings some of that experience into the inbox itself, which is pretty cool to see. And again, we're doing this hover stuff down here. So it feels more of like a web experience than a typical email experience which is awesome. So I want you guys to play around with that a little bit.

[00:03:08]
Play around with both hover states and those key frame animations and test them out in your emails. So create some sort of hover state for your button. Preferably make it do more than just changing the background color, that's pretty easy. So mess around with things like transform, the transform property is awesome in CSS and you can do some really cool stuff with that.

[00:03:31]
The Mozilla Developer Network documentation is a great resource, so visit MDN if you wanna look at some of those transform properties. And then look at those key frame animations, add a key frame animation to something like the image. You can scale it, you can rotate it, you can fade it in an out, if you wanna you can use position and move it around the screen of the email, around that view port.

[00:03:53]
Test those out, add some animations in our emails.