CSS - Animation

Ethan D. - May 31, 2024

Introduction to CSS Animation

CSS animation lets web developers make dynamic and engaging visual effects on web pages. With CSS animation, you can add motion, transitions, and interactivity to elements without using JavaScript or other programming languages.

CSS animation has several benefits. It helps improve user experience by making web pages more attractive and engaging. Animations can guide users' attention, give visual feedback, and create a sense of interactivity. CSS animations are hardware-accelerated in modern browsers, so they perform well, even on mobile devices. Using CSS for animation also reduces the need for external libraries or plugins, resulting in faster load times and better performance.

To get started with CSS animation, you need to understand some basic concepts and terminology. An animation has a series of keyframes that define the start and end states of an element's styles, as well as any intermediate states. Each keyframe specifies a percentage or a specific point in the animation timeline. The browser then transitions the element's styles between these keyframes over a specified duration. You create CSS animations using the @keyframes rule and apply them to elements using animation properties such as animation-name, animation-duration, animation-timing-function, and more. These properties control different parts of the animation, such as its name, duration, speed curve, delay, iteration count, and direction.

In this tutorial, we will look at the different CSS animation properties, learn how to define keyframes, and create animations using only CSS. We will also cover CSS transitions, which allow smooth transitions between different styles. By the end of this tutorial, you will have a good understanding of CSS animation and be able to create your own engaging and interactive animations for your web projects.

CSS Animation Properties

CSS provides several properties to control different aspects of an animation. These properties allow you to specify the animation's name, duration, timing function, delay, iteration count, direction, fill mode, and play state.

animation-name

The animation-name property specifies the name of the animation you want to apply to an element. You can choose any name you like, but it must match the name used in the @keyframes rule that defines the animation.

Example: Single Animation Name

.element {
  animation-name: myAnimation;
}

You can also apply multiple animations to an element by separating the animation names with commas:

Example: Multiple Animation Names

.element {
  animation-name: myAnimation, anotherAnimation;
}

animation-duration

The animation-duration property sets the length of time an animation should take to complete one cycle. You can specify the duration using different time units, such as seconds (s) or milliseconds (ms).

Example: Animation Duration

.element {
  animation-duration: 2s;
}

animation-timing-function

The animation-timing-function property controls the speed curve or pace of the animation. It determines how the animation moves over its duration. CSS provides several built-in timing functions:

ease (default): Starts slow, speeds up in the middle, and slows down at the end.
linear: Keeps a constant speed throughout the animation.
ease-in: Starts slowly and gradually speeds up.
ease-out: Starts quickly and gradually slows down.
ease-in-out: Starts slowly, speeds up in the middle, and slows down at the end.

You can also create custom timing functions using the cubic-bezier() function, which allows you to define your own speed curve.

animation-delay

The animation-delay property specifies a delay before the animation starts. You can set a positive or negative value using time units. A positive value delays the start of the animation, while a negative value starts the animation immediately but skips ahead by the specified amount.

Example: Animation Delay

.element {
  animation-delay: 1s; /* Starts after a 1-second delay */
}

.another-element {
  animation-delay: -0.5s; /* Starts immediately but skips ahead by 0.5 seconds */
}

animation-iteration-count

The animation-iteration-count property determines the number of times an animation should repeat. You can specify a number value or use the infinite keyword to make the animation repeat indefinitely.

Example: Animation Iteration Count

.element {
  animation-iteration-count: 3; /* Repeats the animation 3 times */
}

.another-element {
  animation-iteration-count: infinite; /* Repeats the animation indefinitely */
}

animation-direction

The animation-direction property controls the direction of the animation. It has four possible values:

normal (default): The animation plays forward from 0% to 100%.
reverse: The animation plays backward from 100% to 0%.
alternate: The animation plays forward on odd iterations and backward on even iterations.
alternate-reverse: The animation plays backward on odd iterations and forward on even iterations.

animation-fill-mode

The animation-fill-mode property specifies the styles applied to an element when the animation is not playing (before it starts, after it ends, or both). It has four possible values:

none (default): No styles are applied to the element before or after the animation.
forwards: The element keeps the styles from the last keyframe encountered during the animation.
backwards: The element keeps the styles from the first keyframe encountered during the animation, even during the animation-delay period.
both: The element keeps the styles from both the first and last keyframes, extending the animation's effects in both directions.

animation-play-state

The animation-play-state property determines whether an animation is running or paused. It has two possible values:

running (default): The animation is currently playing.
paused: The animation is currently paused.

You can use this property to pause and resume animations based on user interactions or other conditions.

These animation properties give you control over how your animations behave. By combining these properties, you can create complex and engaging animations that add life and interactivity to your web pages.

Keyframes

Keyframes are the parts of CSS animations. They define the styles and stages of an animation at specific times. You create keyframes using the @keyframes rule, followed by the animation name and a set of keyframe selectors and their styles.

To define the stages and styles of an animation, you use keyframe selectors. The most common keyframe selectors are from (representing 0% of the animation duration) and to (representing 100% of the animation duration). These selectors define the starting and ending styles of the animation.

Example: Defining Basic Keyframes

@keyframes myAnimation {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

The animation named myAnimation starts with the element being fully transparent (opacity: 0) and positioned 100% to the left of its original position (transform: translateX(-100%)). By the end of the animation, the element becomes fully opaque (opacity: 1) and returns to its original position (transform: translateX(0)).

You can also use percentage values as keyframe selectors to define intermediate stages of the animation. Percentage values represent specific points in the animation timeline.

Example: Defining Intermediate Keyframes

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

The animation starts with the same styles as before (0% keyframe). At the 50% point of the animation, the element becomes semi-transparent (opacity: 0.5) and moves 50% to the right of its original position (transform: translateX(50%)). At the 100% keyframe, the element becomes fully opaque and returns to its original position.

You can create complex animations by defining multiple keyframes with different styles. Each keyframe represents a specific point in the animation timeline, and the browser automatically changes the styles between these keyframes to create a smooth transition.

Example: Defining Complex Keyframes

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  25% {
    opacity: 0.25;
    transform: scale(1.2) rotate(45deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8) rotate(-90deg);
  }
  75% {
    opacity: 0.75;
    transform: scale(1.1) rotate(180deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
}

In this complex animation, the element undergoes multiple transformations at different keyframes. It starts with reduced opacity and scale, then scales up and rotates at the 25% keyframe. At the 50% keyframe, it scales down and rotates in the opposite direction. The animation continues with more transformations at the 75% keyframe and returns to its original opacity and scale at the 100% keyframe.

By defining keyframes with various styles and using multiple keyframe selectors, you can create complex and visually appealing animations. The browser takes care of transitioning the element's styles between these keyframes based on the specified animation properties.

CSS Transitions

CSS transitions let you create smooth changes between two states of an element. Unlike animations, which are defined using keyframes, transitions are triggered when an element changes from one state to another, such as when you hover over a button or an element's class changes.

Transitions are different from animations in several ways. While animations can have multiple keyframes and run continuously, transitions are used for simple state changes and are triggered by user interactions or changes to an element's properties. Animations are defined using the @keyframes rule, while transitions are applied to the element using transition properties.

To create a transition between styles, you need to specify the CSS properties you want to animate, the duration of the transition, the timing function, and a delay before the transition starts. Let's look at the transition properties.

transition-property

The transition-property property specifies the CSS properties you want to animate. You can list one or more properties separated by commas. If you want to transition all properties that change, you can use the keyword all.

Example: Specifying Transition Properties

.element {
  transition-property: width, height, background-color;
}

.another-element {
  transition-property: all;
}

In the first example, only the width, height, and background-color properties will be animated. In the second example, all properties that change will be transitioned.

transition-duration

The transition-duration property sets the duration of the transition. You specify the duration using time units such as seconds (s) or milliseconds (ms).

Example: Setting Transition Duration

.element {
  transition-duration: 0.5s;
}

In this example, the transition will take 0.5 seconds (500 milliseconds) to complete.

transition-timing-function

The transition-timing-function property controls the speed curve or pace of the transition. It determines how the intermediate values of the transitioned properties are calculated. CSS provides several timing functions:

Timing Function	Description
`ease` (default)	Starts slow, speeds up in the middle, and slows down at the end.
`linear`	Keeps a constant speed.
`ease-in`	Starts slowly and speeds up.
`ease-out`	Starts quickly and slows down.
`ease-in-out`	Starts slowly, speeds up in the middle, and slows down at the end.

You can also create custom timing functions using the cubic-bezier() function.

Example: Setting Transition Timing Function

.element {
  transition-timing-function: ease-in-out;
}

In this example, the transition will start slowly, speed up in the middle, and slow down at the end, creating a smooth effect.

transition-delay

The transition-delay property specifies a delay before the transition starts. You can set a positive value using time units to delay the start of the transition.

Example: Setting Transition Delay

.element {
  transition-delay: 1s;
}

In this example, the transition will start after a 1-second delay.

By combining these transition properties, you can create smooth transitions between different states of an element. Transitions are a way to add interactivity and improve the user experience on your web pages.

Combining Animations and Transitions

CSS animations and transitions are tools for creating dynamic and engaging effects on web pages. While animations and transitions have different uses, you can combine them to create impressive and interactive experiences.

Using animations and transitions together allows you to build complex and visually appealing effects. You can use a transition to change an element's style when a user hovers over it, and then trigger an animation to add visual flair.

Example: Combining Transitions and Animations

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #ff0000;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

When a user hovers over the button, the background-color transitions to red over a duration of 0.3 seconds using the ease timing function. At the same time, the pulse animation is triggered, making the button scale up and down infinitely.

By combining transitions and animations, you can guide the user's attention, provide visual feedback, and create engaging micro-interactions. Transitions are great for handling state changes and creating smooth transitions between different styles, while animations allow you to define more complex and multi-stage effects.

Here are some ideas for combining animations and transitions:

Idea	Description
Hover and click interactions	Use transitions for hover effects and animations for click or tap interactions.
Page states and views	Apply transitions to create smooth changes between different page states or views, and use animations to add visual interest and draw attention to important elements.
Interactive navigation	Combine transitions and animations to create interactive navigation menus, dropdown lists, or accordions.
Revealing and hiding elements	Use transitions to reveal or hide elements, and animations to add extra flair or context to the interaction.

When combining animations and transitions, consider the user experience and performance. Too many animations and transitions can be overwhelming and may negatively impact the usability and accessibility of your web page. Be selective and use them purposefully to enhance the user experience without hindering it.

Also, keep in mind that animations and transitions can affect performance, especially on low-powered devices or older browsers. Test your animations and transitions on various devices and browsers to ensure they perform well and provide a smooth experience for all users.