CSS Transitions and Animations

This tutorial covers everything you need to know about transitions and animations in CSS — from basic concepts to advanced techniques. It is structured progressively, so you can learn step by step, even if starting from scratch.

CSS Transitions – Complete Guide

CSS transitions allow smooth changes of style property values without using JavaScript. Instead of a change being instantaneous, it unfolds gradually, providing a more fluid and pleasant visual experience.

What are transitions

Transitions are visual effects that occur when a CSS property changes. They can be applied on hover, focus, activation, or any other state change.

Involved properties

transition-property – defines which property will be animated
transition-duration – duration of the transition (e.g., 0.5s, 200ms)
transition-timing-function – how the transition progresses (e.g., ease, linear)
transition-delay – delay before the transition starts

Simple transition example

The transition below changes the background color on hover, using the longhand form:

🔧 Live Example – Color Transition

<button class="btn">Hover me</button>

.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.btn:hover {
  background-color: #2ecc71;
}

transition-property

Defines which CSS property will be animated. It can take:

all – animates all properties that can be transitioned
background-color, width, opacity, etc. – animates only the specified property
none – disables transitions

🔧 Live Example – transition-property

<div class="box">Hover me</div>

.box {
  background-color: #3498db;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.box:hover {
  background-color: #e74c3c;
  width: 250px; /* will not animate, because it is not included in transition-property */
}

transition-duration

Defines how long the transition takes. Accepted values:

s – seconds (e.g., 0.5s)
ms – milliseconds (e.g., 200ms)

🔧 Live Example – transition-duration

<div class="box">Hover me</div>

.box {
  background-color: #8e44ad;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.box:hover {
  background-color: #f39c12;
}

transition-timing-function

Defines how the transition progresses over time. Controls the speed curve of the animation. Accepted values:

ease – starts slow, accelerates, then slows down (default)
linear – constant speed throughout the transition
ease-in – starts slow, then accelerates
ease-out – starts fast, then slows down
ease-in-out – starts and ends slow
cubic-bezier(x1, y1, x2, y2) – custom function for advanced control

🔧 Live Example – transition-timing-function

<div class="box">Hover me</div>

.box {
  background-color: #1abc9c;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.box:hover {
  width: 250px;
}

transition-delay

Defines the delay before the transition starts. Accepted values:

0s – no delay
0.5s, 200ms etc. – custom delay

🔧 Live Example – transition-delay

<div class="box">Hover me</div>

.box {
  background-color: #34495e;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 1s;
}

.box:hover {
  background-color: #9b59b6;
}

Shorthand form – `transition`

Once you understand how the individual properties work (transition-property, transition-duration, transition-timing-function, transition-delay), you can use the shorthand transition to combine them into a single line.

General structure:

transition: [property] [duration] [timing-function] [delay];

Example:

transition: background-color 1s ease 0.5s;

This line is equivalent to:

transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0.5s;

🔧 Live Example – Shorthand form

<div class="box">Hover me</div>

.box {
  background-color: #2c3e50;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition: background-color 1s ease 0.5s;
}

.box:hover {
  background-color: #e67e22;
}

Example – Multiple transitions with shorthand

You can animate multiple properties at the same time using the shorthand form:

transition: background-color 0.5s ease, transform 0.3s ease-in;

This example animates both the background color and transformation (scaling) on hover.

🔧 Live Example – Multiple transitions

<div class="box">Hover me</div>

.box {
  background-color: #2980b9;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition: background-color 0.5s ease, transform 0.3s ease-in;
}

.box:hover {
  background-color: #c0392b;
  transform: scale(1.2);
}

Introduction to CSS Animations

CSS animations allow detailed control over visual changes using @keyframes rules and dedicated properties. Unlike transitions, animations do not rely on direct interaction (hover, click); they can trigger automatically, repeat, reverse, or synchronize.

Difference between transitions and animations

Transitions – triggered by a CSS property change (e.g., hover), simpler
Animations – defined with @keyframes, can be complex, repetitive, and independent of interaction

🔧 Live Example – Transition vs Animation

<div class="box">Hover me</div>

.box {
  background-color: #3498db;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  transition-property: background-color;
  transition-duration: 0.5s;
}

.box:hover {
  background-color: #e74c3c;
}

/* Independent animation */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Properties involved in CSS animations

@keyframes – defines the stages of the animation
animation-name – the name of the animation (linked to @keyframes)
animation-duration – duration of one iteration
animation-timing-function – how the animation progresses over time
animation-delay – delay before the animation starts
animation-iteration-count – how many times the animation repeats
animation-direction – direction of the animation (normal, reverse, alternate)
animation-fill-mode – behavior before/after the animation (none, forwards, backwards, both)

🔧 Live Example – Complete Animation

<div class="box">Animation</div>

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.box {
  background-color: #2ecc71;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

Simple animation example – pulsing

This example creates a "pulse" animation that repeatedly enlarges and shrinks an element.

🔧 Live Example – Pulsing

<div class="box">Pulse</div>

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

.box {
  background-color: #e74c3c;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-delay: 0s;
}

Simple animation example – fade in

This example makes an element appear gradually, increasing opacity from 0 to 1.

🔧 Live Example – Fade In

<div class="box">Fade In</div>

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.box {
  background-color: #2980b9;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

What are timing functions?

Timing functions define the speed curve of an animation. They determine how the movement is distributed over the duration of the animation. In other words, they control the pace at which an element transforms over time.

For example, an animation can start slowly and accelerate towards the end, or vice versa. These functions provide fine control over how the user perceives the motion.

Live Example – Timing Functions

<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box ease-in-out">ease-in-out</div>

.box {
  width: 100px;
  height: 40px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 40px;
  margin: 10px;
  position: relative;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes slide {
  from { left: 0; }
  to   { left: 200px; }
}

.linear      { animation-timing-function: linear; }
.ease        { animation-timing-function: ease; }
.ease-in     { animation-timing-function: ease-in; }
.ease-out    { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

Live Example – Timing Function steps()

<div class="box">Step by Step</div>

@keyframes stepMove {
  from { left: 0; }
  to   { left: 200px; }
}

.box {
  width: 100px;
  height: 40px;
  background-color: #e67e22;
  color: white;
  text-align: center;
  line-height: 40px;
  position: relative;
  animation-name: stepMove;
  animation-duration: 2s;
  animation-timing-function: steps(5);
  animation-iteration-count: infinite;
}

Live Example – Timing Function cubic-bezier()

<div class="box">Bezier</div>

@keyframes move {
  from { left: 0; }
  to   { left: 200px; }
}

.box {
  width: 100px;
  height: 40px;
  background-color: #1abc9c;
  color: white;
  text-align: center;
  line-height: 40px;
  position: relative;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-iteration-count: infinite;
}

Multiple animations and advanced control

CSS allows applying multiple animations simultaneously to the same element. Each animation can have its own name, duration, timing function, and behavior. By combining them, you can create complex and dynamic effects.

Additionally, properties like animation-delay, animation-fill-mode, and animation-direction offer fine control over how animations behave before, during, and after execution.

Live example – Multiple animations

<div class="box">Bounce & Fade</div>

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}

@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.box {
  background-color: #9b59b6;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  opacity: 0;
  animation-name: bounce, fade;
  animation-duration: 1s, 2s;
  animation-timing-function: ease-out, ease-in;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}

Example – Shorthand animation

You can apply a complete animation in a single line using the shorthand form:

animation: bounce 1s ease-in-out infinite alternate;

This example makes the element bounce vertically infinitely, with back-and-forth motion.

🔧 Live example – Shorthand animation

<div class="box">Bounce</div>

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.box {
  background-color: #27ae60;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 8px;
  animation: bounce 1s ease-in-out infinite alternate;
}

Advanced animation control

CSS is great for simple effects, but if you want precise control over animations, JavaScript steps in. You can detect when an animation ends, synchronize them with each other, or trigger them conditionally.

1. JavaScript events: `animationend`, `transitionend`

These events are automatically triggered when an animation or transition finishes. You can use them to launch other actions or change styles.

🔧 Live example – animationend

<div class="box">Animated</div>

@keyframes fadeOut {
  to { opacity: 0; }
}

.box {
  background-color: #3498db;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  animation: fadeOut 2s forwards;
}

document.querySelector(".box").addEventListener("animationend", () => {
  alert("Animația s-a terminat!");
});

2. Synchronization and chaining

You can trigger an animation only after another one has finished, using animationend or setTimeout. This allows you to create chained effects.

🔧 Live example – chaining

<div class="step1">Step 1</div><div class="step2">Step 2</div>

@keyframes show {
  to { opacity: 1; }
}

.step1, .step2 {
  background-color: #2ecc71;
  width: 100px;
  height: 40px;
  margin: 10px;
  color: white;
  text-align: center;
  line-height: 40px;
  opacity: 0;
}

.step1 {
  animation: show 1s forwards;
}

document.querySelector(".step1").addEventListener("animationend", () => {
  document.querySelector(".step2").style.animation = "show 1s forwards";
});

3. Conditional animations

You can start an animation only if a condition is met – for example, if an element has a class or if the user performs an action.

🔧 Live example – conditional animation

<button id="trigger">Start</button><div class="target">Animated</div>

@keyframes pulse {
  to { transform: scale(1.2); }
}

.target {
  background-color: #e67e22;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
}

.animate {
  animation: pulse 1s infinite alternate;
}

document.getElementById("trigger").addEventListener("click", () => {
  document.querySelector(".target").classList.toggle("animate");
});

Practical applications

Now that you've mastered animations and their control, it's time to apply them in the interface. Below are real examples, used in modern websites and applications.

1. Hover effects

A simple yet elegant effect that provides visual feedback on interaction. In this example, the card slightly lifts and changes its color on hover.

transition: transform 0.3s ease, background-color 0.3s ease;

🔧 Live example – Hover effect

<div class="card">Hover over me</div>

.card {
  background-color: #34495e;
  width: 160px;
  height: 60px;
  color: white;
  text-align: center;
  line-height: 60px;
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  background-color: #2c3e50;
}

2. Animated loader

An animated loader indicates progress or waiting. Below, a circle pulses continuously to suggest activity.

🔧 Live example – Animated loader

<div class="loader"></div>

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

.loader {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e74c3c;
  animation: pulse 1s infinite;
  margin: 20px auto;
}

3. Slide-in menu

A menu that slides in from the left, and the open button disappears when the menu is active. When closed, the button reappears.

🔧 Live example – Slide-in menu

<button id="openMenu">Open Menu</button>
<div class="menu">
  <button id="closeMenu">×</button>
  <p>Menu content</p>
</div>

.menu {
  position: fixed;
  top: 0;
  left: -220px;
  width: 200px;
  height: 100%;
  background: #1abc9c;
  color: white;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 1000;
}

.menu.active {
  left: 0;
}

#openMenu {
  margin: 20px;
  z-index: 1001;
}

#openMenu.hidden {
  display: none;
}

#closeMenu {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

const openBtn = document.getElementById("openMenu");
const closeBtn = document.getElementById("closeMenu");
const menu = document.querySelector(".menu");

openBtn.addEventListener("click", () => {
  menu.classList.add("active");
  openBtn.classList.add("hidden");
});

closeBtn.addEventListener("click", () => {
  menu.classList.remove("active");
  openBtn.classList.remove("hidden");
});

4. Animated cards

Cards can have effects on appearance or interaction. In the example below, they animate with a fade-in on load.

🔧 Live example – Animated cards

<div class="card">Card 1</div><div class="card">Card 2</div>

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  background: #9b59b6;
  color: white;
  width: 120px;
  height: 50px;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  border-radius: 6px;
  animation: fadeIn 0.6s ease forwards;
}

5. Scroll-based animations (with JS)

Elements can appear with effects when they enter the viewport.

Elements animate automatically on scroll, using IntersectionObserver to detect the moment they enter the viewport.

🔧 Live example – Scroll-based animation with IntersectionObserver

<div class="spacer">Scroll ↓</div>
<div class="scroll-box">Hello 1</div>
<div class="scroll-box">Hello 2</div>
<div class="scroll-box">Hello 3</div>
<div class="spacer">Scroll ↑</div>

@keyframes appear {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spacer {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  color: #aaa;
  font-style: italic;
}

.scroll-box {
  opacity: 0;
  background: #f39c12;
  width: 160px;
  height: 50px;
  margin: 40px auto;
  text-align: center;
  line-height: 50px;
  border-radius: 6px;
  font-weight: bold;
}

.scroll-box.visible {
  animation: appear 0.6s ease forwards;
}

const boxes = document.querySelectorAll(".scroll-box");

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
}, {
  threshold: 0.5
});

boxes.forEach(box => observer.observe(box));

Optimization and performance

Animations can enhance user experience, but if not well designed, they can impact performance. In this chapter, we learn what to animate, how to use the GPU, and which practices to apply for a smooth UI.

1. Which properties are expensive

Not all CSS properties are equal when it comes to performance. Some trigger complex recalculations and reflows in the browser.

❌ Expensive: width, height, top, left, margin  
✅ Recommended: transform, opacity

🔧 Live example – Expensive vs efficient properties

<div class="box">Animated</div>

@keyframes inefficient {
  to { width: 300px; }
}

@keyframes efficient {
  to { transform: scale(1.5); }
}

.box {
  background: #e74c3c;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 20px auto;
  animation: efficient 1s ease forwards;
}

2. GPU vs CPU rendering

Properties like transform and opacity are GPU-accelerated, which makes them ideal for smooth animations. Other properties are processed by the CPU and can cause stuttering.

animation: transform 1s ease; /* GPU-friendly */  
animation: width 1s ease;     /* CPU-intensive */

🔧 Live example – GPU vs CPU rendering

<div class="gpu">GPU</div><div class="cpu">CPU</div>

@keyframes scaleUp {
  to { transform: scale(1.3); }
}

@keyframes growWide {
  to { width: 300px; }
}

.gpu, .cpu {
  background: #2ecc71;
  width: 150px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 10px auto;
}

.gpu {
  animation: scaleUp 1s ease forwards;
}

.cpu {
  animation: growWide 1s ease forwards;
}

3. Best practices

To keep animations fast and smooth, follow these recommendations:

Use transform and opacity for animations
Avoid modifying layout during animation
Test on real devices, not just in the browser
Respect user preferences: @media (prefers-reduced-motion)

🔧 Live example – prefers-reduced-motion

<div class="motion-box">Adaptive animation</div>

@keyframes pulse {
  to { transform: scale(1.2); }
}

.motion-box {
  background: #9b59b6;
  width: 160px;
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  margin: 20px auto;
  border-radius: 6px;
  animation: pulse 1s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .motion-box {
    animation: none;
  }
}

Animations are not just decoration — they are part of the rhythm and personality of an interface. But without optimization, beauty becomes a burden.

Choosing the right properties, using the GPU, and following best practices are not optional — they are essential.

When performance is smooth, the user doesn't notice the animation — they feel it. And that's what makes the difference between a site that looks good and one that feels alive.

🧠 Quiz – CSS Transitions and Animations

CSS Variables ➔