Pulsing heart CSS animation

css

responsive-design

animation

css-animations

byAnton Shumikhin·Nov 16, 2024

Capture a pulsing heart effect in CSS. Use @keyframes to animate the scale of a heart-shaped element:

// Pulse of love
@keyframes pulse {
  0%, 100% { transform: scale(1); // Start and end at normal size, just like my ego }
  25% { transform: scale(1.3); // Increase by 30%, like realizing your code runs correctly }
  50% { transform: scale(1); // Back to normal, calm down ego! }
  75% { transform: scale(1.3); // Oh wait, the code still runs? Ego boost again! }
}

// Think my heart will burst, doc? Nope, it is just a CSS trick!
.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  transform: rotate(-45deg);
  animation: pulse 2s infinite ease-in-out; // Eternally pulsing just like endless love... 
}

// Shape of my heart
.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%; // Half circles? Sure, why not!
}

// Position, my dear Watson!
.heart::before { top: -50px; }
.heart::after { left: 50px; }

This chunk of code realizes a double beat pattern interrupted by periods of rest , as if mimicking a feel-good, natural heartbeat.

Heart's construction in CSS

Sculpting the heart

Utilize ::before and ::after pseudo-elements to chisel out a heart from CSS. Basically, this method involves creating two overlapping circles (border-radius: 50%;) atop a square base. Rotate and absolute position to craft the familiar heart silhouette.

The pattern of love

Craft a heartbeat that feels real using a pair of strong pulses, succeeded by a brief pause. Adjust the @keyframes to master this rhythm. For instance, two quick 30% scale increases (representing the throbbing pumps) interrupted by a return to normal size mimic an actual heartbeat.

@keyframes heartbeat {
  0%, 20%, 40%, 60%, 80%, 100% { transform: scale(1); }
  10%, 50% { transform: scale(1.3); }
}

Love unending

Make the heart pulsate non-stop using the infinite keyword. This keeps the heartbeat going without an end, just like true love.

Heartbeat styling pointers

The magnitude of love

The transform: scale(1.3); instruction simulates a 30% size surge, amplifying the effect without making it appear overstated. It's best to begin and wrap up the animation at scale(1) for smooth transitions.

The rhythm of love

Perfect the rhythm by tinkering with the animation-duration property. You'll find a 2s duration fits the rhythm well. For more natural movement, play around with the ease-in-out timing function.

Centrality rules

For the best visual experience, ensure the heart is the focal point. Adjust your layout using grid, flexbox, or other traditional techniques to get the perfect positioning.

Clean code, supreme code

Strive for clean, understandable code by removing unneeded styles. Each line should serve a unique purpose, contributing to the efficiency and performance of your code.

Responsive to all screens

Adopt a mobile-first approach and scale gracefully to larger screens. Use relative units like em for sizes and see the magic of media queries to maintain responsiveness.

Take your pulse to the next level

Beat by beat, keeping it subtle

Be certain your text or essential design parts aren't obscured by the pulsation. You'll find subtlety to be a much more effective and accessible approach than going all-out.

Consistent heartbeat across all browsers

Ensure your heartbeat animation appears consistently across browsers. Use vendor prefixes as a safeguard for backwards compatibility.

Top performance, guaranteed

Avoid bogging down performance with complex animations. Aim to limit repaints and possible layout thrashing with optimized CSS.

SVG enhancement

In addition to CSS, consider using SVG manipulation for more complex animation paths and shapes. Experience more advanced animation control with SVG's <animateTransform> element.

Minimalistic alternative

For simpler applications, utilize HTML Font Icons or the &hearts; entity in conjunction with dynamic font-size within your keyframes as lighter alternatives.