wilson staley

CSS Animations 101

CSS animations allow you to bring your website to life by animating different elements on the page. It is a powerful tool that can be used to create subtle animations that enhance the user experience, or more complex animations that are the focal point of the page.

Today, we’re going to walk through everything you need to know to get up and running creating your own CSS animations. The first thing you’ll need to know is the @keyframes rule…

@keyframes rule

The @keyframes rule in CSS is used to define the animation that is applied to an element. It is used to specify the styles for different points in the animation sequence, also called keyframes.

The basic syntax for the @keyframes rule is as follows:

@keyframes animation-name {
  keyframe-selector {
    property: value;
  }
}

The animation-name is a name that you assign to the animation so that it can be applied to an element using the animation-name property. The keyframe-selector is a percentage value or a "from" or "to" value which represents the point in the animation sequence that the styles will be applied to.

animation-name

To apply the animation defined in a @keyframes rule, you can add the animation-name property to an element. For example, if we have these keyframes defined:

@keyframes color-change {
	from {
		color: red;
	}
	to {
		color: blue;
	}
}

We can apply this animation to an element with the animation-name property by simply doing this:

p {
	animation-name: color-change;
}

animation-duration

But there’s a catch! The default duration of any given animation is 0 seconds. So if you do not specify an animation-duration property alongside the animation-name, you will not be able to see the animation take place. So if we update our previous example to look like this:

p {
	animation-name: color-change;
	animation-duration: 2s;
}

Now we should be able to see the paragraphs’ color changing from red to blue over the course of 2 seconds.

animation-iteration-count

By default, the animation will run once, and then the element will return to the styles it had before the animation began. The animation-iteration-count property lets us specify how many times the animation should run. You can use a number, or the infinite keyword to have the animation continually run.

p {
	animation-name: color-change;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

animation-direction

With the previous example, our paragraphs will go from red to blue over the course of 2 seconds. Then it will jump back to red and repeat the animation indefinitely. What if we wanted the animation to run from red to blue, then run in reverse, so it transitions nicely back from blue to red? This is where the animation-direction property comes into play. We can specify 4 different values for the animation-duration property:

  • normal: run from the first keyframe (0%) to the last (100%)
  • reverse: run from the last keyframe (100%) to the first (0%)
  • alternate: take turns running the animation once forward, then once in reverse, etc.
  • alternate-reverse: take turns running the animation once backwards, then once forwards, etc.
p {
	animation-name: color-change;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

animation-timing-function

The animation-timing-function CSS property is used to set the timing function for an animation. The timing function controls the speed at which an animation progresses through its keyframes. It can be used to create a smooth or gradual transition between keyframes, or to create a more sudden or abrupt transition.

There are several predefined timing functions that can be used with the animation-timing-function property:

  • ease: starts slow, speeds up, and then slows down again (default value)
  • linear: proceeds at a constant speed
  • ease-in: starts slow and speeds up
  • ease-out: starts fast and slows down
  • ease-in-out: starts slow, speeds up, and then slows down again

Additionally, you can also create your own custom cubic-bezier timing function using the cubic-bezier(x1, y1, x2, y2) function, where x1, y1, x2, y2 are the coordinates of the two control points of the cubic-bezier curve.

animation-fill-mode

The animation-fill-mode CSS property is used to specify how an element should be styled before and after an animation. It can be used to control the final state of an element after the animation has completed.

There are several predefined values that can be used with the animation-fill-mode property:

  • none: (default value) the animation has no effect on the element before or after the animation
  • forwards: the element retains the style values set by the last keyframe of the animation after the animation has completed.
  • backwards: the element is set to the style values of the first keyframe of the animation before the animation starts.
  • both: the element is set to the style values of the first keyframe of the animation before the animation starts and retains the style values set by the last keyframe of the animation after the animation has completed.

animation-delay

The final CSS property related to animations is animation-delay. This property is used to specify the amount of time that should elapse before an animation starts. It can be used to create a delay between the time an element is loaded and the time the animation begins.

Ok! Those are the basics of CSS animations. Now, let’s get some practice by building a cool animation step-by-step.

Here’s the animation we’ll build:

animated green box

Let’s start by setting up the HTML:

<div class='box' />

Now, let’s give the box some initial styles

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
}

Then we can define the keyframes for our animation

@keyframes move-and-color {
  0% {
    transform: translateX(-150) rotate(0deg) scale(1);
    background-color: #4caf50;
  }
  25% {
    transform: translateX(0px) rotate(180deg) scale(1.5);
    background-color: #8bc34a;
  }
  50% {
    transform: translateX(150px) rotate(360deg) scale(1);
    background-color: #cddc39;
  }
  75% {
    transform: translateX(0px) rotate(180deg) scale(1.5);
    background-color: #8bc34a;
  }
  100% {
    transform: translateX(-150px) rotate(0deg) scale(1);
    background-color: #4caf50;
  }
}

In this animation, we are using percentage values to get more fine-grained control of the box styles throughout the animation. We are simultaneously moving the box along the x-axis, rotating it about its origin, scaling it up and down, and changing its color!

Now let’s apply the animation to the box

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  animation: move-and-color;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

And voila! The box is now animating! We’ve set it up to take 3 seconds to complete one lap through the keyframes, and to continue indefinitely.

If you’d like to see my working example, feel free to checkout my codepen.