CSS Animations: @keyframes

There are many useful libraries out there for making our web pages a bit more dynamic, but one particularly fun way to style your elements is by using something called the @keyframes rule.

There are many different animation properties we can use with this rule, but I will be focusing on just three.

  1. animation-duration

2. animation-delay

3. animation-iteration-count

4. animation-name

Just as movie frames provide illustrations for the starting and ending points for any given animation, CSS keyframes allow us to create our own beginning and end to an animation. We can think of them like the pages in a flip book. The best way to see this is through an example.

Let’s say we’re working on a website for an aquatic center and we’re tasked with creating some animations for the homepage. So far, all we have is a goldfish, and it’s just sitting motionless in a div, but we’d like to give it the appearance of swimming across the div (and across our homepage).

The first step is to add a class or ID to our fish, and set a few parameters for it’s swim. What should the title of the swim be? How long should it take to swim across the page? Should there be a delay before it begins moving? How many laps should it swim? We’ll throw the answers to those questions in our stylesheet for our friend, Nemo.

#nemo{

animation-name: swim;

animation-duration: 10s;

animation-delay: 2s;

animation-iteration-count: infinite;

}

Now it’s time to write the pages in our flip book. We can have as many pages (keyframes) as we’d like, but 5 will do for our sake. Now, we return to our stylesheet.

@keyframes swim{
 0% {
 transform: translateX(0);
 }
 25% {
 transform: translateX(70px);
 }
 50% {
 transform: translateX(150px);
 }
 75% {
 transform: translateX(250px);
 }
 100% {
 transform: translateX(275px);
 }
}

Keep in mind we use virtually any CSS property, but a relevant one in this case is transform. We can think of “translateX” as a way of moving horizontally across the x-axis. In this case, Nemo is swimming from left to right, but we could just as easily have him swim from right to left by passing in negative values instead.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.