CSS Transitions and Animations

In this chapter, we will introduce you to CSS transitions and animations, which will allow you to bring your web pages to life with smooth and engaging motion effects.

CSS transitions are great for simple effects like hover states, while animations provide more control with keyframes for complex motion sequences. This section will cover the basics to get you started with both CSS transitions and animations.

To get lost and an idea of how crazy some animations can get check out Jhey on CodePen.

CSS Transitions

CSS transitions enable you to change property values smoothly (over a given duration) instead of instantly. This can be useful for hover effects, focus effects, or any other state change that benefits from a smooth transition.

Let's create a simple transition that changes the background color of a box when it is hovered over.

<div class="box">Hover Me!</div>

.box {
  font-size: 30px;
  font-family: arial;
  padding: 20px;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  transition: background-color 0.6s ease;
}

.box:hover {
  background-color: coral;
}

The transition property specifies that the background-color should transition over 0.6 seconds using an ease timing function when the box is hovered over. We will look at how the timing functions work a little later.

You can build up these transitions with the following structure:

1. transition-property: Specifies the CSS property to which the transition is applied.
2. transition-duration: Defines how long the transition takes.
3. transition-timing-function: Specifies the speed curve of the transition.
4. transition-delay: Defines a delay before the transition starts.

As an example, transition: background-color 0.3s ease 0.5s; would define a transition-property of background-color , a transition-duration of .3 seconds, transition-timing-function of ease and then finally a transition-delay of .5 seconds.

Multiple Transitions

You can apply multiple transitions to an element by separating each transition with a comma.

.box {
  font-size: 30px;
  font-family: arial;
  padding: 20px;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  transform: scale(1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.box:hover {
  background-color: coral;
  transform: scale(1.1);
}

In this example:

• Both the background-color and transform properties transition when the box is hovered over, creating a smooth color change and scaling effect.

Timing functions

Here are the timing function keywords you can use as timing functions depending on the effect you want to achieve:

• linear: The animation progresses at a constant speed.
• ease: The animation starts slowly, accelerates, and then slows down.
• ease-in: The animation starts slowly and accelerates.
• ease-out: The animation slows down at the end.
• ease-in-out: The animation starts and ends slowly.

CSS Animations

CSS animations enable you to animate the transition of properties over time. Unlike transitions, which only allow you to define the start and end states, animations provide more control with keyframes, allowing you to specify intermediate steps in the animation sequence.

We use keyframes to define the states and intermediate steps of an animation. You use the @keyframes followed by the name of your keyframe to create a keyframe:

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

Or, you can use percentages to define intermediate steps:

@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

You use a set of animation properties to apply animations to an element. Here are some of the most common for you to use:

• animation-name: Specifies the name of the @keyframes animation you want to use.
• animation-duration: Defines how long the animation takes to complete one cycle.
• animation-timing-function: Specifies the speed curve of the animation.
• animation-delay: Defines a delay before the animation starts.
• animation-iteration-count: Specifies the number of times the animation should be played.
• animation-direction: Defines whether the animation should play in reverse on alternate cycles.

Now, to tie it together, let's create an animation that utilizes all these properties and explain how they work after.

<div class="animation">Look at me go!</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.animation {
  width: 250px;
  height: 250px;
  display: flex;
  left: 0;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-family: arial;
  font-weight: bold;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  animation-name: spin-morph-move;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes spin-morph-move {
  0% {
    transform: rotate(0deg);
    border-radius: 50%;
    background-color: red;
    left: 0;
  }
  50% {
    transform: rotate(360deg);
    border-radius: 0;
    background-color: blue;
    left: calc(100% - 250px);
  }
  100% {
    transform: rotate(0deg);
    border-radius: 50%;
    background-color: red;
    left: 0;
  }
}

You can play with the CodePen here.

• animation-name: The name of the keyframe animation is spin-morph-move.
• animation-duration: The animation takes 5s to complete one cycle.
• animation-timing-function: The speed curve of the animation is ease-in-out.
• animation-delay: There is a 1s delay before the animation starts.
• animation-iteration-count: The animation runs infinite times.
• animation-direction: The animation plays in alternate directions, reversing on every other cycle.

Practice creating different transitions and animations to become comfortable with the syntax and possibilities of these CSS features. Try different properties, like the font color and timing to see how much fun you can have.

When I first discovered CSS animations, my mind was blown by the possibilities. I hope this created a whole world of excitement for you too!