CSS Animations - johnverz22/webdev1-lessons GitHub Wiki

What Are CSS Animations?

CSS animations let you add movement to HTML elements.

You can:

• Slide buttons
• Fade text
• Spin icons
• Make pages feel dynamic

You don’t need JavaScript for basic effects.

---

Two Ways to Animate in CSS

1. Transitions

Used for simple changes (like hover effects). Works when a property value changes.

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: green;
}

2. Keyframe Animations

Used for continuous or complex animations. You define steps (keyframes) for how things move.

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

.box {
  animation: slideIn 1s ease-out;
}

---

Basic Animation Properties

Property	What it does
animation-name	Name of the keyframe rule
animation-duration	How long the animation runs
animation-timing-function	Speed curve (ease, linear)
animation-delay	Wait before starting
animation-iteration-count	How many times it runs
animation-direction	Normal, reverse, alternate
transition	Combines property, duration, and easing for hover states

---

Example: Fade In Text

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1 {
  animation: fadeIn 2s ease-in;
}

---

Example: Button Hover Bounce

button {
  transition: transform 0.2s ease;
}

button:hover {
  transform: scale(1.1);
}

---

Looping Animations

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.box {
  animation: pulse 1s infinite;
}

---

Tips

• Don’t animate too many elements at once.
• Keep animations short (under 1 second).
• Use easing (ease-in-out, ease, etc.) to make motion feel natural.
• Always test on both desktop and mobile.