CSS Animation Examples

Now that we understand the mechanics, let's look at some practical, tasteful examples of CSS animation.

Most of the time, you won't be building giant bouncing squares. The best web animations are subtle, providing context or delight without overwhelming the user.

The Pulse Button

In this example, we use multiple @keyframes rules, combined with pseudo-elements (::after) to create a subtle "call to action" pulsing effect on a button. This is a very common and elegant pattern used across the web to draw attention to important user actions.

<!doctype html>
<title>Example</title>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f4f4f9;
  font-family: sans-serif;
  margin: 0;
}

.pulse-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  position: relative;
  /* Animate the button to slightly heave */
  animation: heave 2s infinite alternate ease-in-out;
}

.pulse-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50px;
  border: 2px solid #007bff;
  /* Animate the outline pulse */
  animation: ripple 2s infinite ease-out;
}

.pulse-btn:hover {
  background-color: #0056b3;
  animation-play-state: paused;
}

.pulse-btn:hover::after {
  animation-play-state: paused;
  opacity: 0;
}

.pulse-btn:active {
  scale: 0.95;
  transition: scale 0.1s;
}

@keyframes heave {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
</style>
<button class="pulse-btn">Hover & Click Me</button>

View Output

Notice how we separated the "heave" animation (moving the button up and down) from the "ripple" animation (the expanding border). By using the ::after pseudo-element, we can fade out the expanding ring without fading out the button itself. Also try hovering and clicking the button to see how CSS pseudo-classes (:hover and :active) interact with the animation.

Skeleton Loading Screen

Another popular use case for tasteful animation is the "skeleton screen". Instead of showing a traditional loading spinner, modern web apps often show a gray placeholder representation of the content that animates with a "shimmering" effect to indicate that data is loading.

<!doctype html>
<title>Example</title>
<style>
body {
  font-family: sans-serif;
  background-color: #f8f9fa;
  padding: 20px;
}

.skeleton-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  padding: 20px;
  max-width: 300px;
  margin: 0 auto;
}

/* The base style for our shimmering skeleton elements */
.skeleton {
  background-color: #eee;
  /* Create an angled gradient for the "shine" */
  background-image: linear-gradient(
    90deg, 
    #eeeeee 0px, 
    #f8f8f8 40px, 
    #eeeeee 80px
  );
  /* Make the background much wider than the element so we can slide it */
  background-size: 300px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

.skeleton-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.skeleton-title {
  width: 60%;
  height: 20px;
  margin-bottom: 15px;
}

.skeleton-text {
  width: 100%;
  height: 12px;
  margin-bottom: 8px;
}

.skeleton-text.short {
  width: 80%;
}

@keyframes shimmer {
  0% {
    background-position: -300px 0;
  }
  100% {
    background-position: 300px 0;
  }
}
</style>

View Output

This shimmering effect is achieved without moving any elements around (which is great for performance). Instead, we animate the background-position of a linear-gradient background from left to right.