Instant CSS
Tools
Templates
Components
Learn
More
Heartbeat
Animation
A fast-paced pumping animation.
Reset to Default
HTML
Copy HTML
<div class="heart">❤️</div>
CSS
Copy CSS
.heart { font-size: 50px; animation: heartbeat 1.5s ease-in-out infinite both; } @keyframes heartbeat { from { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; } 10% { transform: scale(0.91); animation-timing-function: ease-in; } 17% { transform: scale(0.98); animation-timing-function: ease-out; } 33% { transform: scale(0.87); animation-timing-function: ease-in; } 45% { transform: scale(1); animation-timing-function: ease-out; } }
Live Preview
❤️
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.