Codexpal - Learn Programming Interactively

Lesson Content

CSS Animations

CSS animations let you create complex, multi-step animations using keyframes. Unlike transitions (which animate between two states), animations can have multiple steps and can run automatically.

Keyframes

Define animation steps using @keyframes:

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

Using Keyframes

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

.element {
  animation: fadeIn 1s ease-in-out;
}

Animation Properties

animation-name: Name of the keyframe animation
animation-duration: How long the animation takes
animation-timing-function: How animation progresses
animation-delay: Delay before animation starts
animation-iteration-count: How many times to repeat (number or infinite)
animation-direction: normal, reverse, alternate, alternate-reverse
animation-fill-mode: forwards, backwards, both, none
animation-play-state: running, paused

Shorthand Syntax

/* Shorthand */
.element {
  animation: fadeIn 1s ease-in-out 0.5s infinite alternate;
}

/* Long form */
.element {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Multiple Keyframe Steps

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

Common Animations

Fade in/out
Slide in from sides
Bounce effects
Rotating spinners
Pulse effects

Example Code

Create a keyframe animation that fades in an element.

<!DOCTYPE html>
<html>
<head>
<style>
/* Create a fadeIn animation using @keyframes */
/* Animation should go from opacity 0 to opacity 1 */

.box {
  width: 200px;
  height: 200px;
  background-color: #3b82f6;
  /* Apply the fadeIn animation, 2s duration, ease-in-out timing */
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Expected Output:

Box with fade-in animation

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code