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.
You can follow along with the exercise files for this tutorial, or you can skip ahead to the final to see how everything works out. Let's go to Coda and take a look at the HTML behind this example. It's a very simple HTML, once again, and we have a div with the class of button and within that we have a link with the text of the button called Contact Me. For right now, our link is going nowhere because this is just an example. But in a real situation, this link would obviously be going somewhere. And if we take a look at our starting styles, we have a basic setup, setting a background color and the shape of our button, as well as the styles to define how our link should look inside our button.
So let's get started by creating our animation. For this example, we're going to animate between a few background colors to give the button a unique glow effect. It's definitely something different than we could get with the transition or other hover effects. So it's unique to animations. First, we'll define our keyframes. I am going to name this animation glow since that's more or less what we're going to be doing here. I have picked a few shades of blue and bluish- greens that I'd like to cycle through for my button. I'll assign each has a background color property at various percentage keyframes.
So I'll start with my 0% keyframe with the background color that I've already picked. So at our 0% keyframe, we will add the background color of this shade of blue that I've already picked ahead the time and then add a 20% keyframe. We'll add another shade of blue, then at 70%, we will change the background color once again. And then for our last keyframe at 100%, we will set our background color to one final shade.
So I'm writing keyframes like this. It's nice to have all your colors picked out ahead the time whether you have a specific palette in Photoshop or something similar. I picked the percentages based on what looked best to me. But really, it's just kind of a made-up effect. So, if certain other percentages or maybe more colors or more keyframes looks better for you, feel free to add them. Now that we have created our animation, let's assign this animation to our button. We'll use the shorthand to assign this animation to our button. So we'll start by adding the animation property. We will use the glow animation, since that's the one we just made for our animation name.
For our duration, we'll select 3 seconds, and that's just a duration I've picked as looking good for cycling through those colors. We are going to select the animation timing function of ease just to give it a nice in and out kind of feel to it. We will repeat this animation an infinite number of times. So our animation iteration count is infinite, and our animation direction I'm going to set to alternate. And the reason I am doing this is so that our animation will play forwards through our keyframes then backwards to our keyframes. And that will stop it from having a hard cut between the 100% and 0% keyframe, because it will keep going back and forth so it will be a nice smooth transition through all our colors.
So let's save everything and preview our animation right now. So we'll go over to our Browser, Preview our animation, and you'll see our button is starting to cycle colors slowly over the 3 seconds. Going forwards first then backwards, and sometimes the change is faster or slower, that all depends on how our keyframes are set up. So everything is looking good. Let's get on to adding the pause and play functionality to our animation. So back to our CSS in Coda, we're going to add a couple of things. First, we'll add one more line to our button class, and what we're going to do set the animation play state to paused initially.
So we have our animation-play-state, and we'll set that to paused. Animation-play-state can take two different values. The animation-play-state can be paused or running and those work just like they sound. If your play-state is paused, nothing is happening. It's paused like you hit the Pause button. And if your animation-play-state is running, it's working like you hit the Play button. Our animation is now paused by default, and if we previewed our button again now, nothing would happen at all because it's paused. Paused animations, however, aren't really anywhere near as much fun as ones that plays.
So let's add a condition for when our animation will actually play. To do that, we'll add a rule for button:hover, and within that rule, we'll add another animation-play-state property. So I'll just copy that from up here because it's really long to type, and this time, I will set it to running. So what this means is that the animation on our button will be paused initially, but then when we hover over the button, the animation-play- state will be switched to running and by default, animations are always in a play-state of running unless we tell it otherwise.
Let's go to our browser and see what our button looks like right now. When we refresh the page, initially nothing is happening. Our button is just hanging out like a regular button. But if we hover over it, suddenly the animation starts playing, and we see that cycling background color. If we hover off of it, the animation pauses, and you'll notice there is no hard cut. It just stops right where it was. And if we hover back over it, the animation picks up again right where it paused and keeps going through its cycle. There's some potential here to create a very unique hover effect. In a way, the button appears to behave slightly differently each time you hover over it, and it is a more complex effect than we could have gotten from using a transition or just a regular CSS hover.
One more time we'll go back to Coda, and in our CSS, we'll add our vendor prefixes since we're happy with our animation right now. Now that we have our vendor prefixes in place, this animation will play in non-WebKit browsers too. CSS animations triggered by hovers are best suited for subtle and non-essential animations because in older browsers, we wouldn't actually be able to see this effect at all. For example, if we were looking at this button in a browser that doesn't support animations at all, we would just see the static button and really nothing would be lost. So it's important not to include any essential information in animations like this.
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.