Keyframe Animations Introduction

[00:00:00]
>> Jason Rodriguez: The next step up from that is going to be using keyframe animation, so CSS animations inside of your email. So this is cool cuz you can do more complex stuff using CSS animations. That keyframes property allows you to set different waypoints for when things should occur in your animations.

[00:00:21]
So you can create really complex stuff. We're gonna see a pretty simple example. And then you can pair this again with that transition property to make everything kinda fade in and out, or move around nicely and look really smooth. So if you're not familiar with CSS keyframes, there's a couple of things you need to worry about.

[00:00:40]
The main thing driving this is the @keyframes property inside of CSS. So this will go on the head of your document. And it tells the rendering engine that you're setting up this animation that you want to then call at some point. So the way this works is you have your keyframes.

[00:00:57]
And then you have your animation name here, and that's what you're going to call later on for your element. In this case, it's called animation-name. And then, we have a class of whatever the element is we're targeting and trying to animate. And we'll call that name down here using this animation property.

[00:01:13]
So inside of the keyframe's curly braces you have different states that you're setting up. So you can do something simple like save from the state, from these properties to this end state. That can be anything from the background color or the color of an element through to the positioning.

[00:01:34]
You can move things around the screen, you can do all kinds of crazy stuff inside of keyframe animations. You could get more complex and have different steps by using percentages inside of that, 0 to 100%. So if you want one thing to happen in the first 20% of that animation, then you'd say 20% and then set all of your properties.

[00:01:54]
Then you could do 30%, 50%, 70%. So you can have this stepped approach to your animations, and using that you can create some pretty complex stuff. For our purposes, we're just gonna have simple states. We're gonna have a faded out state, and then a faded in state for our element so there's this nice fading in animation for our email campaign.

[00:02:14]
So if you open it up and it looks cool, it kinda draws your attention to the campaign but it's not overpowering or anything like that. So we'll just use from and to. So you're going from one state, the initial state, to another state, which is that end state.

[00:02:27]
And then for any element we want to apply this animation to, we use this animation CSS property which takes a whole bunch of different rules in there, different properties. But the main ones we're looking at are the duration of the animation itself, how many times we want the animation to play through.

[00:02:46]
And then calling the name of the animation, that keyframe animation that we originally set up.