Viewers: in countries Watching now:
This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
We've been working in just 2D so far. But let's have a look at how we can apply the animation skills we've learn to 3D transforms as well. If you worked with 3D transforms before, either statically or with transitions, this tutorial will show you how to use them within animations. If you haven't worked with 3D transforms before, you may want to review the CSS Transitions and Transforms course first before watching this tutorial. I won't be getting into much detail on how the 3D transforms works specifically. In this tutorial, we'll create an effect on a thumbnail gallery by animating each photo with a 3D transform into place.
So it will look a little something like this when the page loads. At the time of this recording, 3D transforms are not widely supported by all browsers. If we take a look at the caniuse.com Support chart, you can see there's a lot of red squares' showing no support or dark green squares showing just a little bit of support. For that reason, I'm creating an effect that isn't critical to my content. If my page is viewed in a browser that doesn't support 3D transforms, my images will still display but they'll just be missing that little bit of extra flare. Nothing critical will be lost, so I don't feel the need to create a fallback alternative for this particular effect.
We're used to working in the X and Y axis for positioning in CSS. But with 3D transforms, we have one more axis to consider, the Z or Zed axis depending on which way you like to say that letter. Our X axis moves from left to right on our page. Our Y axis is the vertical axis, moving from top to bottom. Our Zed axis, or Z axis, moves out of the screen towards us, so higher Z values or Zed values are closer to the viewer. Lower values on the Zed axis are farther away from the viewer, and the higher values on the Zed axis are closer to you as a viewer.
We'll be animating the rotation of our photos using the Rotate Transform. Rotations can happen along any of these three axes. Every HTML element has an origin point, the point at which all transforms will happen from and they are center by default. The default origin point is in the middle. If we rotate an element along its X axis, we will be rotating it in 3D space, and for the purposes of our animation, we're going to move the origin point on our image to the top left so it will kind of hinge in from the left side. Let's go to Coda and have a look at the HTML structure behind this effect.
We have a whole list of images within our wrapper div and each one has the usual things you'd expect for an image, a source, and width, and height, and it also has one additional class assigned to each, and that's the class of pic. If we take a look at our CSS, there are a couple of starting styles that are a bit different than what we've looked at before. Specifically in our wrapper div, we have a perspective set 1000 pixels. For best results when using 3D transforms especially on a group of objects, it's best to set this perspective at the parent element. And again, if you're not familiar with the idea of perspective and transforms in 3D, it will be a good idea to check out the course on CSS Transforms and Transitions to get a little more insight into why it is we picked this and how we got that number.
Perspective essentially defines the focal length of the imaginary lens you're viewing your object through. The higher the number, the more flat things will appear, and the lower the number, the more exaggerated and drastically 3D things will appear. Additionally in our starting CSS, our images have some positioning styles in place to set them in a grid. We'll add one more rule to set the transform origin to the top left like we just looked at. So we'll add our transform-origin, and we will set that to top and left.
Having our images rotate from the left side like we said, we will make it appear more like a hinge rotation than a rotation around its center. Everything is in place for our animation. So let's take quick look at the effect we're going to try to create. Imagine this is a top-down view of our image and the lower line is our browser window. We want to have our image start out rotated 90 degrees away from our browser window. So that way it essentially wouldn't exist at all. And then as we create our animation, we're going to want to rotate it towards being flat against our browser window.
So it will start out almost like an open door and then our animation will cause that door to shut. And then once it's shut, our image will be flat up against our screen, if that's really how web pages worked, and it will appear just like an image normally would. It takes a little imagination to think in 3D sometimes. So let's go back to Coda and actually add this animation we just looked at to our CSS. We'll start out by adding our keyframes blocked just like before, and I'm going to call this animation Hinge, since we just discussed this is going to look a little bit like a door. For this animation, since we're kind of creating an open door to a closed door, I'm going to use the keywords of from and to, to define my keyframes because that really describes what we're doing.
And we're going to start out moving from a rotation along the Y axis of 90 degrees that will be our open door, so rotation on our Y axis of 90 degrees, and then our closed door is essentially having our image flat up against the browser window again. So we'll just copy and paste this line so we can use it again. And this time we'll set in our to keyframe our rotation of 0 degrees, which is essentially no rotation and/or exactly where it would be if we hadn't bothered to transform it at all, and that's where we want things to end up.
With our keyframes defined, let's assign this animation to our image. We'll assign everything with the class of pic, this animation. So we'll assign at the animation name of hinge, since that's the animation we just created. We'll have duration of just 0.5 seconds because we want this effect to happen very quickly is just an added bit of flare as things load in, not something you need to sit and watch. I've actually already picked out a cubic-Bezier function to use to define my animation timing function. I'll just paste that in now. There's no delay, so I will skip that part.
And our animation iteration count will be one. We just want this to happen once. Our animation direction will be normal. Our animation-fill-mode will be forwards. And this important so that way our image maintains the styles from our to keyframe once the animation has completed. So when our animation ends, our image will stay right where it would have been originally if no effect had happened at all. So it's animating itself into place. Let's test our animation and see how things look. So we'll go back over to Chrome, we'll refresh our browser, and you can see all the images hinged into places if they were kind of closing a door towards the browser window.
For an even more interesting effect, though, we can try and assign some delays to some of these images because it's a little bit repetitive to see them all swinging at once. It might be a little interesting to see them stagger a little bit. So below our class of pic, I'll let a couple of nth-of-type rules to vary the animations and create a slightly different effect. So this nth-of-type selector will affect every second image in our list, and we're going to add an animation delay to it to vary things a little bit. So we'll add a delay of something small, 0.2 seconds.
The whole duration is only 0.5 seconds. We want to stagger this, so we want these to start before the first batch ends and then we'll copy and paste this whole rule, and we will add a second nth-of-type rule for every third image just to make things ever so slightly more varied, and we'll change our delay on these ones to 0.3 just to have things staggered even more. So now that we've added two animation delays, there's one other thing we need to change about our animation. The very last thing we have listed in our animation shorthand is the animation-fill-mode of forwards.
But now that we're dealing with delays, we need this to happen during the delay of our animation as well. So we actually now need an animation-fill-mode of both. And that means that our images will maintain the styles from our first from keyframe during their 0.2- or 0.3-second delay, and once they are done they'll maintain the styles from the to keyframe. So now if we save our file and go over to our browser to preview, we'll see we have a nice staggered hinge effect on our photos, and having them stagger is just a little bit more interesting than having them all open at the same time. The result makes for an effect that looks a lot more varied because all the images aren't animating in at exactly the same time.
So that's the quick look at how we can apply animations to our 3D transforms. There's obviously a whole lot more you can do with animations in 3D. So if you're interested in it, it's something you should definitely look into a lot, and you'll be able to create some really cool effects.
There are currently no FAQs about CSS: Animations.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.