How to Create Pulse Animation in CSS: Simple Guide

To create a pulse animation in CSS, use the @keyframes rule to define scaling changes and apply it with the animation property on an element. This makes the element smoothly grow and shrink repeatedly, creating a pulsing effect.

Syntax

The pulse animation uses the @keyframes rule to define the animation steps, and the animation property to apply it to an element.

• @keyframes pulse: Defines the animation named 'pulse'.
• 0%, 100%: The start and end states of the animation.
• transform: scale(1): Normal size.
• 50%: The middle of the animation.
• transform: scale(1.1): Slightly larger size for the pulse effect.
• animation: pulse 2s infinite;: Runs the pulse animation over 2 seconds repeatedly.

css

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

.element {
  animation: pulse 2s infinite;
}

Example

This example shows a blue circle that smoothly grows and shrinks continuously, creating a pulse effect.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.pulse-circle {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  border-radius: 50%;
  animation: pulse 2s infinite;
  display: inline-block;
}

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

Output

A blue circular shape in the center of the page that smoothly grows 10% larger and then returns to normal size repeatedly every 2 seconds.

Common Pitfalls

• Forgetting to include transform-origin can cause the pulse to scale unevenly; it defaults to center but can be set explicitly.
• Not setting animation-iteration-count or using infinite will stop the pulse after one cycle.
• Using transition instead of @keyframes will not create a continuous pulse.
• Applying the animation to inline elements without setting display can cause unexpected behavior.

css

/* Wrong: Using transition for pulse effect */
.element {
  transition: transform 2s;
}
.element:hover {
  transform: scale(1.1);
}

/* Right: Using keyframes for continuous pulse */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.element {
  animation: pulse 2s infinite;
  display: inline-block;
}

Quick Reference

Property	Description	Example Value
@keyframes	Defines animation steps	pulse
transform	Changes element size or position	scale(1.1)
animation-name	Name of the animation	pulse
animation-duration	How long one cycle lasts	2s
animation-iteration-count	How many times to repeat	infinite
animation-timing-function	Speed curve of animation	ease-in-out

Key Takeaways

Use @keyframes with transform: scale() to create a pulse effect.

Apply animation with infinite iteration for continuous pulsing.

Set animation duration to control pulse speed.

Avoid using transition for continuous animations like pulse.

Ensure the element is block or inline-block for smooth scaling.