CSS Shimmer Effect Animation: A Beginner’s Guide

Photo by Toan Chu
Photo by Toan Chu on Unsplash

Introduction

Alright, let’s dive into the world of CSS animations and, more specifically, the shimmer effect. But before we start, let me ask you a question. Have you ever seen a website where some elements seem to shimmer or glow? That’s the shimmer effect, and it’s a popular trend in modern web design. But how is it done? Well, that’s what we’re here to find out!

What is CSS?

CSS, or Cascading Style Sheets, is a language used to describe how HTML elements should be displayed on a webpage. It’s like the fashion designer of the web world – it decides what color your text should be, where your images should go, and even how elements should move or change when you interact with them.

What is the Shimmer Effect?

Imagine you’re walking down a beach at sunset. The sun is low in the sky, casting long shadows and making the sand glisten. Do you see that? That glistening effect is similar to what we call the “shimmer effect” in web design.

In technical terms, the shimmer effect is a CSS animation that creates a moving shine effect. It can be used to draw attention to specific elements on your webpage or to create loading animations.

Creating a Basic Shimmer Effect

Now that we know what the shimmer effect is, let’s try creating one ourselves. Don’t worry; I’ll walk you through it step by step.

First, we need to create an HTML element that we want to apply the shimmer effect to. For this example, let’s use a simple div: 

<div class="shimmer">Shiny Text</div>

Next, we need to define our CSS animation. This is where the magic happens! 

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 25%, transparent 50%);
  background-size: 200% 100%;
}

In this example, the keyframes move the background position from 200% to -200%, creating the illusion of movement. The animation property is then used to apply this animation to the .shimmer class, with a duration of 2s, a linear function, and an infinite iteration count to make the shimmer effect loop indefinitely.

And voila! You’ve just created your first CSS shimmer effect!

See the Pen Untitled by Ivan Lim (@ivanlim) on CodePen.

Enhancing the Shimmer Effect

Now that we’ve got the basics down, let’s explore some ways we can enhance our shimmer effect.

One way is by changing the colors in our gradient. Try using different shades of gray for a more subtle effect, or go bold with bright colors!

Another way is by changing the speed of our animation. Simply adjust the duration of our animation property: 

.shimmer {
  animation: shimmer 1s infinite; /* Faster */
}
Or slow it down for a more dramatic effect: 
.shimmer {
  animation: shimmer 3s infinite; /* Slower */
}

The possibilities are endless! So go ahead and experiment with different settings to create your own unique shimmer effects.

Conclusion

And there you have it! You’ve just learned how to create a basic CSS shimmer effect and some ways to enhance it. But remember, this is just the beginning. The world of CSS animations is vast and full of possibilities. So don’t stop here – keep exploring, keep learning, and most importantly, have fun!

Share: