Simple Zoom in zoom out animation in CSS

A simple zoom in zoom out animation can add a touch of elegance to your designs. Luckily, it's very simple to create one, using CSS.

At its core, a zoom in zoom out animation is a three-step animation and can be defined using @keyframes. At the start (0%) and end (100%), the element is its original size (scale: 100%). Halfway through (50%), it's scaled up to a larger size (e.g. scale: 150%). This creates the illusion of zooming in and out.

After defining your animation, you'll use the animation property to apply it to an element. In this example, we'll be applying it with a timing of 1s and an easing of ease, and we'll make it loop infinitely, but feel free to adjust these values to your liking.

.zoom-in-out-element {
  animation: zoom-in-zoom-out 1s ease infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    scale: 100%;
  }
  50% {
    scale: 150%;
  }
  100% {
    scale: 100%;
  }
}