What Are CSS Animations?

CSS animations let you create smooth, simple motion without JavaScript. You control movements, fades, color changes, rotations, and more.

The Two Things You Must Know

1. @keyframes → defines the animation
2. animation: → applies the animation to an element

Basic Fade-In Animation

/* 1. Define animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. Apply animation */
.box {
  animation: fadeIn 2s ease-in-out;
}
      

Move an Element

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

.box {
  animation: moveRight 1.5s ease-out;
}
      

Looping Animation

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

.ball {
  animation: bounce 1s infinite;
}
      

Animation Properties

Useful ones you must know:

animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
      

Quick Example: Color Change

@keyframes colorCycle {
  0%   { background: red; }
  50%  { background: purple; }
  100% { background: blue; }
}

.button {
  animation: colorCycle 3s infinite linear;
}
      

Why Animations Matter

• Makes UI feel alive
• Improves user experience
• Can guide attention
• Super lightweight (no JS needed)

What’s Next?

Next you’ll learn how Batch file arguments work and how to pass data into your scripts.