8. Transitions, Animations & Transforms

Level: IntermediateDuration: 35m

Introduction to CSS Transforms

Transforms let you modify an element's appearance in a 2D or 3D space without affecting the document flow. You can move, scale, rotate, or skew elements for dynamic visual effects.

css

/* Translate: move element */
div { transform: translate(50px, 100px); }

/* Scale: resize element */
div { transform: scale(1.5); }

/* Rotate: rotate element */
div { transform: rotate(45deg); }

/* Skew: tilt element */
div { transform: skew(20deg, 10deg); }

You can also combine multiple transforms: ```css div { transform: translate(50px, 50px) rotate(30deg) scale(1.2); } ```

CSS Transitions

Transitions allow smooth changes between CSS property values over time when triggered by events like hover or focus.

css

/* Smooth background change on hover */
button {
  background-color: #3498db;
  transition-property: background-color, transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

button:hover {
  background-color: #2ecc71;
  transform: scale(1.1);
}

Shorthand version: ```css button { transition: all 0.5s ease-in-out; } ```

Keyframes & Animations

Keyframes let you define intermediate steps in an animation sequence, giving you full control over timing and properties.

css

/* Define keyframes */
@keyframes slideAndFade {
  0% { transform: translateX(-100px); opacity: 0; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100px); opacity: 0; }
}

/* Apply animation */
div {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation-name: slideAndFade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

animation-name: name of the keyframes
animation-duration: how long the animation lasts
animation-iteration-count: number of repetitions
animation-timing-function: easing of the animation
animation-fill-mode: determines styles after animation ends

Mini Project Step

Create an interactive card that grows slightly on hover, rotates a little, and changes color smoothly. Then add an infinite animation for an icon inside the card that moves side to side and fades in/out.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform & Animate Card</title>
<style>
.card {
  width: 200px;
  height: 150px;
  background-color: #3498db;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.card:hover {
  transform: scale(1.1) rotate(5deg);
  background-color: #2ecc71;
}
.icon {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  animation: bounceFade 2s infinite ease-in-out;
}
@keyframes bounceFade {
  0% { transform: translateX(-20px); opacity: 0; }
  50% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(20px); opacity: 0; }
}
</style>
</head>
<body>
  <div class="card">
    <div class="icon"></div>
  </div>
</body>
</html>

MDN CSS Animations Guide

Page

Introduction to CSS Transforms

CSS Transitions

Keyframes & Animations

Mini Project Step