Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Pulse Animation Effect with CSS
The CSS pulse animation effect creates a rhythmic scaling animation that makes elements appear to "pulse" or "breathe" by smoothly growing and shrinking in size. This effect is commonly used to draw attention to buttons, notifications, or important content.
Syntax
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Example: Basic Pulse Animation
The following example demonstrates a simple pulse effect on a button −
<!DOCTYPE html>
<html>
<head>
<style>
.pulse-button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<button class="pulse-button">Click Me!</button>
</body>
</html>
A green button with white text that continuously pulses by scaling from 100% to 110% and back to 100% every 2 seconds.
Example: Pulse with Color Change
You can combine scaling with color changes for a more dynamic effect −
<!DOCTYPE html>
<html>
<head>
<style>
.pulse-box {
width: 100px;
height: 100px;
background-color: #ff6b6b;
border-radius: 10px;
margin: 50px auto;
animation: colorPulse 3s infinite;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
@keyframes colorPulse {
0% {
transform: scale(1);
background-color: #ff6b6b;
}
50% {
transform: scale(1.2);
background-color: #4ecdc4;
}
100% {
transform: scale(1);
background-color: #ff6b6b;
}
}
</style>
</head>
<body>
<div class="pulse-box">PULSE</div>
</body>
</html>
A rounded square that pulses between red and teal colors while scaling from 100% to 120% and back, creating a dynamic breathing effect.
Key Properties
| Property | Description |
|---|---|
animation-duration |
Controls how long one pulse cycle takes |
animation-iteration-count |
Set to infinite for continuous pulsing |
transform: scale() |
Changes the size of the element during animation |
animation-timing-function |
Controls the speed curve (ease, linear, etc.) |
Conclusion
The pulse animation effect is created using CSS keyframes with the transform: scale() property. It's perfect for drawing attention to interactive elements and can be customized with different durations, scaling factors, and additional properties like color changes.
Updated on: 2026-03-15T11:52:44+05:30
802 Views
Advertisements