Join Val Head for an in-depth discussion in this video Animate an element into place, part of CSS: Animation.
- In this video, we'll use CCS Keyframe Animations to animate the entrance of an object on to the screen. We'll be animating this motobox here to make it have a nice official impact as it arrives into view. We'll also be creating a multi step set of keyframes and applying more than one set of keyframes to the same element. Let's get started. The html behind your example continues a section element which is our motobox and within that are the images, text and button that we see inside it. Our CSS file has a number of styles set for the layout and appearance of all the elements, but no animation in it yet.
Thinking about the animation I want to create before I write the keyframes, I know that I'd like this moto to have a bit of a bounce to it when it enters, just for some extra impact. I'd like it to overshoot its end position just a bit and then bounce down just a tiny bit too far before it settles into its final position. Being that this is robot-themed, I can get away with something that's a little bit more fun, without it seeming out of place. So I'll go to the bottom of the CSS file, to start writing my keyframes and I'm going to make just a bit of extra room here too.
I'm going to name this animation slideIn because essentially our motobox is sliding into view and I'm going to start the moto off 400 pixels down from its natural position by translating it on the y-axis so that will be our 0% keyframe. Then I'll have it come up to a point, just 50 pixels higher than its end position and I'm going to add that at our 60% keyframe, then I'll have it come back down ten pixels further than its end position for a two step bounce and I'll add that at our 80% keyframe, which is 80% of the way through our animation and finally at our 100% keyframe, I'll have it end at its original position, applying a zero translation to it.
I should mention that even though I'm writing out these keyframes in one go in this video, writing out keyframe animations like this usually takes a few iterations before you get the exact motion you had in mind so don't worry if it takes you a few tries. With our keyframes in place, let's apply our animation to our motobox and to do that, I'm going to add an additional rule for the section down here, just so we don't have to scroll all over the place. We'll apply the animation of slideIn since that's the one we just wrote and we'll have it take .8 seconds for its duration and I'll apply the timing function of linear, just for now.
Let's save this and preview how things look in our browser so far. We'll refresh so we can see our animation and the motion's looking pretty good so far. It's hitting all the points I wanted to and the timing is looking pretty good. So let's head back to our CSS to fine tune that easing. With these bounces in there, I'd like to change the timing function over the course of the animation, instead of setting one timing function for the entire movement. We can do this by setting new animation timing functions in each keyframe declaration. I'm going to add alternating ease-ins and ease-outs to add some dynamics to this moto's animation.
To make this easier to read, I'm going to break up my keyframe declarations into multiple lines so we'll add an animation timing function here at the 0% keyframe and we'll set that one to ease-out and to our 60% keyframe, we'll make a little space again. We can even copy and paste this to save ourselves some typing. We'll put an animation timing function on our 60% keyframe, but set this one to ease-in and we'll do the same for our 80% keyframe, but this time we'll use the same ease-out timing function that we did on the 0% keyframe and last but not least, our 100% keyframe and on this one we will use ease-in again.
We'll save that and preview our animation again to see the subtle changes. We'll refresh the page and you can see that there's little bits of speed changes in there throughout the animation. It's looking a lot better this way. There's one more thing I'd like to add to give this animation a little bit more polish and that's a second set of keyframes to fade in the motobox at the very beginning of its movement. Right now the moto just appears onscreen and starts moving which isn't bad, but having it fade in at the very beginning of the movement will give this entrance a softer look.
So I'll go back to our CSS and write a new set of keyframes for a fade in animation. Make a little bit more space at the bottom of our document again and we'll add this set of keyframes called fadeIn. To fade this in we'll go from an opacity of zero to an opacity of one. Now we can assign this new fadeIn animation to our moto as well. We'll go up to the section rule which is our moto and we'll comma separate these two animations. So when we add multiple animations, we want to make sure we comma separate them to make a list of animations to add.
We'll add the fadeIn animation, and I'll give it a very short duration so it takes up only maybe the first quarter of time that the entire slideIn animation does and we'll use the ease-in timing function for this. So I'll save this now and when we go back to our browser to preview our work, our motobox is fading at the very start .2 seconds of the animation. So you can just catch a tiny bit of that fadeIn cause it's very fast. Both sets of keyframes are acting on this motobox at the same time. They're both taking effect and essentially playing starting at the same time.
An important note here is that this only works when both sets of keyframes affects different CSS properties entirely. CSS can't combine keyframes in real time. So, for example, if both these sets of keyframes had used transforms this wouldn't work, but the fact that one of our animations is affecting opacity and the other is affecting transforms is why we can make this work. Having a separate set of keyframes for opacity like this allows you to create combined animation effects easily. That's how to animate an element on to the screen using two separate animations applied to it for a nice, polished entrance.
Web designer Val Head introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, and optimizing animation performance, and introduces the best tools and use cases for CSS animation. Start watching to get your brand in motion.
- Using CSS transforms and transitions
- Working with animation-delay and animation-fill-mode
- Timing and easing CSS animations
- Animating elements in place
- Animating sprite images
- Animating CSS transforms and transitions
- Chaining multiple animations
- Animating SVG images
- Creating high-performance CSS animations