How to Create Animations with CSS

Animation makes a website feel more alive and interactive. CSS provides two main ways to create animations: transition for simple animations on state changes, and @keyframes for more complex and repeating animations. This article covers both with code examples you can use right away.

CSS Transition: Simple Animations

CSS Transition is used to animate the change of a CSS property value from one state to another, for example on hover. The transition property has four values:

• property — the CSS property to animate
• duration — the animation duration (in seconds)
• timing-function — the animation speed curve
• delay — the pause before the animation starts

.button {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #1d4ed8; /* changes color on hover */
}

Transition for Multiple Properties

.card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px); /* lifts up */
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Or use 'all' for all properties */
.element {
  transition: all 0.3s ease;
}

Available Timing Functions

.anim-1 { transition: all 0.3s ease; }        /* speed up then slow down */
.anim-2 { transition: all 0.3s linear; }      /* constant */
.anim-3 { transition: all 0.3s ease-in; }     /* start slow */
.anim-4 { transition: all 0.3s ease-out; }    /* end slow */
.anim-5 { transition: all 0.3s ease-in-out; } /* both slow */
.anim-6 { transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* custom */

CSS Animation with @keyframes

For more complex and repeating animations, use @keyframes. First define the keyframes, then apply them to an element:

/* Keyframe definition */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Application */
.loading-icon {
  animation: spin 1s linear infinite;
}

Keyframes with Multiple Stages

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

.important-button {
  animation: pulse 1.5s ease-in-out infinite;
}

The animation Property

.element {
  animation-name: pulse;          /* keyframe name */
  animation-duration: 2s;         /* duration */
  animation-timing-function: ease; /* curve */
  animation-delay: 0.5s;          /* initial delay */
  animation-iteration-count: infinite; /* number of repetitions */
  animation-direction: alternate;  /* back and forth */
  animation-fill-mode: forwards;   /* keep the final state */

  /* Shorthand */
  animation: pulse 2s ease 0.5s infinite alternate forwards;
}

Practical Example: Fade In Animation

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.appear {
  animation: fadeIn 0.5s ease forwards;
}

/* Staggered delay for a list */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

Practical Example: Loading Spinner

<div class="spinner"></div>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
</style>

Example: Text Typing Animation

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink-cursor {
  50% { border-color: transparent; }
}

.typing-text {
  font-family: monospace;
  font-size: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #3b82f6;
  width: fit-content;
  animation:
    typing 3s steps(30) forwards,
    blink-cursor 0.7s step-end infinite;
}

Tips for Creating CSS Animations

• Animate the transform and opacity properties for the best performance — neither triggers a reflow.
• Use will-change: transform on frequently animated elements for optimization.
• Respect user preferences with @media (prefers-reduced-motion: reduce) — turn off animations for sensitive users.
• Don't overdo it — too many animations will disrupt the user experience.

Conclusion

CSS provides two powerful ways to create animations: transition for simple effects on interaction, and @keyframes animation for more complex and repeating animations. By mastering both, you can create a more attractive and interactive website appearance without needing a JavaScript library. From simple hover effects to loading spinners, it can all be done with pure CSS.