Creating Transitions and Animations Using CSS
Tags: css, html, webdev, tutorial
Published: 2023-10-18 15:32:55

Transitions and animations allow you to create more dynamic and responsive webpages. They can help capture your audience's attention and make your website stand out from the competition. In this tutorial, we will delve into these topics and discuss how to create eye-catching transitions and animations using CSS.

> 📧 Subscribe to my newsletter: https://ericsdevblog.ck.page/profile

## The pseudo-selectors

Before we start, we must discuss a fundamental concept, [the pseudo-selector](https://www.thedevspace.io/course/htmlcss-selectors). The pseudo-selectors allow you to define properties that only activate when the element is under a particular state. For instance, let's consider the `<a>` element, which represents a hyperlink in a webpage. Initially, it appears blue. Once clicked, it turns red, and after being visited, it turns purple. Despite being the same element, different styles are applied to it depending on its state.

Pseudo-selectors are the key to achieving this effect. They target elements only when they are in specific states. The hyperlink element starts without any state. When you move the cursor over it, it is given the `:hover` state, and when clicked, it acquires the `:active` state. Lastly, after being visited, it is given the `:visited` state. These states allow you to apply different styles to the same element under different circumstances. This feature is crucial for frontend design because it enables the webpage to respond dynamically to user actions.

As an example, with the following setup, the `<div>` will grow when the cursor is hovered on top of it.

```css
div {
  . . .

  color: darkviolet;
  width: 200px;
}

div:hover {
  color: white;
  background-color: darkviolet;
  width: 400px;
}
```

![Hover over me](https://www.ericsdevblog.com/courses/html-css/3/images/hover-over-me.gif)

## CSS transitions

However, notice that the change happens instantly, so what if you want to customize it to make the change smoother? This effect can be achieved by defining the transition properties.

```css
div {
  . . .

  transition-property: width;
  transition-duration: 2s;
}
```

The `transition-property` specifies the name of the CSS property for which this transition configuration is created. And the `transition-duration` determines how long it takes for the transition effect to complete. In this case, the width of the `<div>` element will take 2 seconds to change from `200px` to `400px`.

![Transition in 2 seconds](https://www.ericsdevblog.com/courses/html-css/3/images/transition-2-seconds.gif)

You can also specify multiple transition properties like this:

```css
div {
  . . .

  transition-property: width, color, background-color;
  transition-duration: 2s;
}
```

![transition with multiple properties](https://www.ericsdevblog.com/courses/html-css/3/images/transition-multiple-properties.gif)

Currently, all the transitions are linear, meaning the speed of changes remains constant throughout the transition process. You can customize this behavior using the `transition-timing-function` property. Some common values include:

- `linear`:

  This is the default behavior. The transition speed remains constant from start to end, as we've demonstrated before. This option is equivalent to using a `cubic-bezier()` function with values `cubic-bezier(0,0,1,1)`.

  ```css
  div {
    . . .

    transition-property: width, color, background-color;
    transition-duration: 2s;
    transition-timing-function: linear;
    /* transition-timing-function: cubic-bezier(0,0,1,1); */
  }
  ```

  The function defines a [Cubic Bezier curve](https://cubic-bezier.com/). I'll spare you the complex mathematical definition, which looks like this:

  ![cubic bezier curve formula](https://www.ericsdevblog.com/courses/html-css/3/images/cubic-bezier-curve-formula.png)

  Instead, all you need to know is that this curve is defined by four control points:

  ![cubic bezier curve control points](https://www.ericsdevblog.com/courses/html-css/3/images/cubic-bezier-curve-control-points.png)

  With these four control points in the above example, the transition will start slow, accelerate in the middle, and finish slowly. You don't need to know precisely how to calculate these points. You can easily find the desired control points using [this website](https://cubic-bezier.com/).

- `ease`:

  Corresponds to the Cubic Bezier function `cubic-bezier(0.25,0.1,0.25,1)`.

  ![transition ease cubic bezier curve](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-curve.png)

  The transition will begin slowly, fast in the middle, and finish slowly.

  ![Transition ease](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease.gif)

- `ease-in`:

  Corresponds to the Cubic Bezier function `cubic-bezier(0.42,0,1,1)`.

  ![transition ease in cubic bezier curve](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-in-curve.png)

  The transition will begin slowly and then accelerate.

  ![transition ease in](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-in.gif)

- `ease-out`:

  Corresponds to the Cubic Bezier function `cubic-bezier(0,0,0.58,1)`.

  ![transition ease out cubic bezier curve](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-out-curve.png)

  The transition will begin fast and then decelerate to end slowly.

  ![transition ease out](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-out.gif)

- `ease-in-out`:

  Corresponds to the Cubic Bezier function `cubic-bezier(0.42,0,0.58,1)`.

  ![transition ease in out cubic bezier curve](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-in-out-curve.png)

  The transition will begin slowly, accelerate in the middle, and finish slowly. This is very similar to `ease`, but as you can see from the curve, it is much smoother, which means there won't be a noticeable acceleration or deceleration phase.

  ![transition ease in out](https://www.ericsdevblog.com/courses/html-css/3/images/transition-ease-in-out.gif)

- `step-start`:

  This transition is a bit different. It is defined by a stepping function, `steps()`, which takes two values. The first one specifies the number of steps, and the second one sets the point at which the change occurs within the step, either `start` or `end`. For example:

  ```css
  div {
    . . .

    transition-property: width, color, background-color;
    transition-duration: 2s;
    transition-timing-function: steps(5, start);
  }
  ```

  In this case, the transition will take five steps, and the change happens at the start of each step.

  ![transition 5 steps](https://www.ericsdevblog.com/courses/html-css/3/images/transition-5-steps.gif)

  The `step-start` option corresponds to the function `steps(1, start)`.

  ![transition step start](https://www.ericsdevblog.com/courses/html-css/3/images/transition-step-start.gif)

- `step-end`:

  The `step-end` option corresponds to the function `steps(1, end)`.

  ![transition step end](https://www.ericsdevblog.com/courses/html-css/3/images/transition-step-end.gif)

You can also set a delay for the transition using the `transition-delay` property.

```css
div {
  . . .

  transition-property: width, color, background-color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;
}
```

![transition delay](https://www.ericsdevblog.com/courses/html-css/3/images/transition-delay.gif)

Notice that the transition only starts one second after the cursor is hovered over the `<div>` element.

Lastly, CSS also provides a shorthand property that enables you to define all transition properties together. The shorthand has the following syntax:

```text
transition: <property> <duration> <timing_function> <delay>;
```

```css
div {
  . . .
  transition: width 2s ease-in-out 1s;
}
```

You can also define multiple transitions using the `transition` shorthand by dividing different cases with commas:

```css
div {
  . . .
  transition: width 2s ease-in-out 1s,
    color 2s ease-in-out 1s,
    background-color 2s ease-in-out 1s;
}
```

## CSS animations

Besides the transitions, there is also a similar concept called animation, except that you don't need to use the pseudo-selectors to define a trigger. The animation starts automatically once it is loaded. Instead, you will need to define keyframes using the `@keyframes` rule.

```css
@keyframes change-bg-color {
  from {
    background-color: white;
  }
  to {
    background-color: darkviolet;
  }
}
```

This animation is named `change-bg-color`, and it changes the `background-color` property from `white` to `darkviolet`. To employ this animation, you must specify the `animation-name` and `animation-duration` properties.

```css
div {
  . . .

  animation-name: change-bg-color;
  animation-duration: 4s;
}
```

![animation change background](https://www.ericsdevblog.com/courses/html-css/3/images/animation-change-bg.gif)

Instead of the keywords `from` and `to`, it is possible to use percentage values, which allows you to define more than two keyframes.

```css
@keyframes change-bg-color {
  0% {
    background-color: white;
  }
  25% {
    background-color: bisque;
  }
  50% {
    background-color: crimson;
  }
  100% {
    background-color: darkviolet;
  }
}

```

![animation multiple keyframes](https://www.ericsdevblog.com/courses/html-css/3/images/animation-multiple-keyframe.gif)

Just like transitions, animation also has properties `animation-timing-function` and `animation-delay`. And they work the same as their transition counterparts.

```css
div {
  . . .

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-timing-function: ease-in-out;
  animation-delay: 2s;
}
```

![animation timing function delay](https://www.ericsdevblog.com/courses/html-css/3/images/animation-timing-function-delay.gif)

You can also define how many times you wish the animation to be repeated using the `animation-iteration-count` property.

```css
div {
  . . .

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-timing-function: ease-in-out;
  animation-delay: 2s;

  animation-iteration-count: 3;
}
```

![animation iteration count](https://www.ericsdevblog.com/courses/html-css/3/images/animation-iteration-count.gif)

The `animation-direction` property defines how the animation will be played, which accepts four different options:

- `normal`: The animation is played forward.
- `reverse`: The animation is played backward.
- `alternate`: The animation is played forward first, then backward. Only works when `animation-iteration-count` is more than 1.
- `alternate-reverse`: The animation is played backward first, then forward.

```css
div {
  . . .

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-timing-function: ease-in-out;
  animation-delay: 2s;

  animation-iteration-count: 4;
  animation-direction: alternate;
}
```

[animation direction alternate](https://www.ericsdevblog.com/courses/html-css/3/images/animation-direction-alternate.gif)

Lastly, the `animation-fill-mode` property determines how the element will be displayed before and after the animation is played. By default, the element will not retain any styles from the animation.

```css
@keyframes change-bg-color {
  0% {
    background-color: white;
  }
  25% {
    background-color: bisque;
  }
  50% {
    background-color: crimson;
  }
  100% {
    background-color: darkviolet;
  }
}

div {
  . . .

  background-color: aqua;

  animation-name: change-bg-color;
  animation-duration: 4s;

  animation-fill-mode: none;
}
```

![animation fill none](https://www.ericsdevblog.com/courses/html-css/3/images/animation-fill-none.gif)

When set to `forwards`, the element will retain the styles from the last keyframe of the animation after the animation is played.

![animation fill forwards](https://www.ericsdevblog.com/courses/html-css/3/images/animation-fill-forwards.gif)

When set to `backwards`, the element will take on the styles from the first keyframe of the animation as soon as the animation is played.

When set to `both`, the element will retain the styles from the first keyframe before the animation starts (behaves like `backwards`), and it will also retain the styles from the last keyframe after the animation is finished (like `forwards`).

Lastly, just like with the transitions, CSS also offers a shorthand property called `animation`, which has the following syntax:

```text
animation: <animation_name> <animation_duration> <animation_timing_function> <animation_delay> <animation_iteration_count> <animation_direction>;
```

```css
div {
  . . .

  animation: change-bg-color 4s ease-in-out 2s 4 alternate;
}
```

[animation shorthand](https://www.ericsdevblog.com/courses/html-css/3/images/animation-shorthand.gif)

## Next steps

In this tutorial, we covered the basics of creating transitions and animations using CSS. If you are interested, here are some of my other articles about CSS and frontend design:

- [Working with Typography in CSS](https://medium.com/dev-genius/working-with-typography-in-css-ca700859fe27)
- [Three Ways of Defining Colors in CSS](https://medium.com/@huericnan/three-ways-of-defining-colors-in-css-7b2f98a3fbf3)
- [How to Position and Arrange Content Using CSS](https://www.thedevspace.io/course/htmlcss-position)
- [HTML & CSS: A Practical Guide](https://www.thedevspace.io/)