CSS Tutorial

Introduction

Edit Template

CSS Tutorial

Introduction

Edit Template

CSS Animations

CSS Animations allow us to bring life and motion to elements—without writing JavaScript. With just a few lines of CSS, you can animate anything from a background color to size, position, or even a full-blown UI component.

Basic Animation Structure

CSS animations are typically built using two things:

  • @keyframes: Defines what the animation will do

  • Animation properties: Controls how the animation behaves (duration, timing, repeat, etc.)

Step-by-Step: Create Your First Animation

Keyframes Syntax
				
					@keyframes fadeColor {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}


				
			

This animation smoothly changes the background color from red to blue.

Apply Animation to an Element
				
					.box {
  width: 200px;
  height: 100px;
  background-color: red;
  animation-name: fadeColor;
  animation-duration: 3s;
}

				
			
Adding Smooth Transitions with Keyframes

You can make your animation more detailed by using multiple percentages.

				
					@keyframes slideFade {
  0% {
    transform: translateX(0);
    opacity: 0.2;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0.2;
  }
}

				
			

Key Animation Properties

Here’s a breakdown of the most important properties to control animations.

 

animation-name

Defines the name of the keyframes you want to use.

				
					animation-name: slideFade;

				
			

animation-duration

How long the animation lasts.

				
					animation-duration: 2s;

				
			

animation-iteration-count

How many times the animation runs.

				
					animation-iteration-count: infinite; /* or 1, 2, 3... */

				
			

animation-delay

Wait time before the animation starts.

				
					animation-delay: 1s;  /* Use negative value to start midway */

				
			

animation-direction

Controls the direction the animation plays.

				
					animation-direction: alternate;

				
			

Options: normal | reverse | alternate | alternate-reverse

animation-timing-function

Controls the speed curve of animation.

				
					animation-timing-function: ease-in-out;

				
			

Options: linear, ease, ease-in, ease-out, ease-in-out

animation-fill-mode

Defines the style before/after animation runs.

				
					animation-fill-mode: forwards;

				
			

Options: none, forwards, backwards, both

HTML
				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <title>Responsive Boxes – Learn With Arshyan</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>Responsive Box Layout</h2>

  <div class="box-container">
    <span class="box box1">Box 1</span>
    <span class="box box2">Box 2</span>
    <span class="box box3">Box 3</span>
    <span class="box box4">Box 4</span>
  </div>

</body>
</html>

				
			
CSS
				
					body {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

.box-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.box {
  flex: 1 1 22%;
  padding: 40px 0;
  color: white;
  font-size: 18px;
  border-radius: 6px;
}

.box1 { background-color: crimson; }
.box2 { background-color: seagreen; }
.box3 { background-color: dodgerblue; }
.box4 { background-color: goldenrod; }

/* Media Query: when screen width is 600px or less */
@media screen and (max-width: 600px) {
  .box-container {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 80%;
    font-size: 20px;
  }
}

				
			

What Happens Here?

  • The .box-container uses flex-direction: row for wider screens (default).

  • Once the screen width drops below 600px, the media query kicks in:

    • The layout switches to column

    • Boxes become centered and take up more width.

  • This is a simple but effective layout adjustment using only CSS.

When to Use Media Queries?

Use media queries when you need:

  • A different layout for mobile than desktop

  • Font sizes to adapt to screen size

  • Hiding or showing elements on specific devices

  • Changing grid or flex directions

Summary Table

FeaturePurpose
max-widthTriggers styles when screen is smaller than the given width
min-widthTriggers styles when screen is larger than the given width
orientationDetects landscape or portrait mode
screen typeTargets regular screens only
Scroll to Top