TechTicket | Session 9 - CSS Animations and Keyframes

🎯 Session Overview

Welcome to Session 9! In the previous session, we learned how to make things move slightly when a user interacts with them (like hovering over a button). But what if we want a loading spinner to spin forever? Or a rocket to fly across the screen automatically?

In this session, you will learn the magic of CSS Keyframe Animations. By the end of today, you will be able to:

Understand how full CSS animations work independently of user interactions.
Write @keyframes to create your own custom animation steps.
Control the speed, timing, and looping behavior of your animations.
Animate movement, rotation, scaling, and color changes over time.
Build modern UI elements like infinite loading spinners!

⏪ Quick Recap: Session 8

Before we animate, let's remember the tools we used for simple hover effects:

CSS Transforms: Changing the visual appearance (translate, scale, rotate).
CSS Transitions: Telling the browser to animate a change smoothly over time instead of instantly snapping.
Hover State: Using :hover to trigger the transition when the mouse touches the element.

The Limit: Transitions only animate between two states (State A to State B). If we want an element to go from State A, to State B, to State C, and then loop forever... we need Animations!

🎬 What are CSS Animations & Keyframes?

Think of an animation like a comic book flipbook or a movie. A movie is just a series of still pictures (frames) played very quickly to create the illusion of movement.

In CSS, we act as the movie director. We define the most important frames—the Keyframes—and the browser automatically fills in all the in-between frames for us!

The `@keyframes` Rule

We use the @keyframes rule to create an animation "recipe". We give it a name, and then describe what the element should look like at the beginning (from) and at the end (to).

@keyframes moveBox {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(200px);
  }
}

Right now, this animation is just a recipe sitting in our CSS file. It doesn't do anything until we apply it to an HTML element!

🚀 Applying the Animation

To make an element use the keyframe recipe we just wrote, we use the animation property. At a minimum, we must tell the element which animation to use and how long it should take.

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  
  /* Apply the 'moveBox' animation over 2 seconds */
  animation: moveBox 2s;
}

The single animation property is actually a shorthand for many sub-properties you can control:

animation-name: The name of your @keyframes (e.g., moveBox).
animation-duration: How long it takes (e.g., 2s).
animation-timing-function: How it speeds up/slows down (e.g., linear, ease-in-out).
animation-delay: How long to wait before starting (e.g., 1s).
animation-iteration-count: How many times to loop (e.g., 3 or infinite).
animation-direction: Should it play backwards? (e.g., alternate makes it go back and forth smoothly).

Example of full shorthand:
animation: moveBox 2s ease-in-out 1s infinite alternate;

⏱️ The Animation Timeline & Demo

Let's visualize how the browser plays an animation. When you say duration: 2s, the browser stretches your keyframes across a 2-second timeline.

0% Start (from)

50% Halfway

100% End (to)

Interactive Demo

Play with the controls below to see how timing and looping affect the animation in real-time!

Duration

Timing Function

Iteration

Box

💯 Percentage Keyframes (Multi-Step Animations)

Using from and to is great for simple animations, but what if you want an element to bounce up and down multiple times? You can use Percentages!

Percentages represent the progress of the animation time. 0% is the start, 50% is the exact middle, and 100% is the end. You can add as many percentages in between as you want!

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px); /* Moves UP at the halfway point */
  }
  100% {
    transform: translateY(0); /* Returns back to the ground */
  }
}

.bouncing-ball {
  animation: bounce 1s ease infinite;
}

By making the 0% and 100% values the exact same, the animation creates a perfect, seamless loop!

🏋️‍♂️ Practice Exercises

Open your code editor. Create an HTML file with a box <div class="box"></div> and link it to a CSS file. Let's make it move!

Exercise 1: Horizontal Slider

Create a @keyframes called slide that moves an element from translateX(0) to translateX(300px). Apply it to your box so it takes 2 seconds to slide.

animation: slide 2s;

Exercise 2: The Infinite Bounce

Using percentage keyframes (0%, 50%, 100%), make your box bounce up and down continuously. Don't forget the infinite keyword in the animation property!

Use transform: translateY(-100px); at the 50% mark!

Exercise 3: Dizzy Box

Create a new keyframe called spin. At 0%, rotation is 0deg. At 100%, rotation is 360deg. Apply this to your box with a linear timing function so it spins endlessly like a wheel!

@keyframes spin { 100% { transform: rotate(360deg); } }
animation: spin 2s linear infinite;

🔥 Mini Challenge: The Loading Spinner

Every modern website uses loading spinners when waiting for data. Now you have the skills to build one from scratch without using any images!

Your Goal:

Create a div with a fixed width and height (e.g., 50px).
Make it a circle by setting border-radius: 50%;
Give it a thick border (e.g., border: 6px solid gray;).
Here is the trick: Make the top border a different color! (border-top: 6px solid cyan;).
Create a @keyframes that rotates from 0deg to 360deg.
Apply the animation using linear and infinite.

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #334155;
  border-top: 6px solid #06b6d4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

🏠 Homework Project: Animated Interface

Your task is to build a small webpage that feels truly alive.

Create a nice button that uses hover transitions to grow slightly when the mouse touches it.
Create a loading spinner using keyframes that spins infinitely on the screen.
Create a "Notification Card" that drops down from the top of the screen (using translateY in keyframes) when the page first loads!

📝 Session Summary

Transitions smooth out simple changes (like hover effects), while Animations give you full control over multi-step movements.
You define the steps of an animation using the @keyframes rule.
You can use from and to for simple 2-step animations, or percentages (0%, 50%, 100%) for complex, looping animations.
To attach the keyframes to an HTML element, you use the animation property, specifying the name and duration at minimum.
You can modify the feel of the animation using Timing Functions like ease-in, ease-out, or linear.