CSS Animation
@keyframes aur animation property se simple pulsing element banao.
Working code
<div class="dot" aria-hidden="true"></div>
<style>
.dot {
width: 48px;
height: 48px;
border-radius: 50%;
background: #0b73ce;
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
50% {
transform: scale(1.2);
opacity: 0.65;
}
}
@media (prefers-reduced-motion: reduce) {
.dot { animation: none; }
}
</style>Preview
How it works
@keyframes animation ke intermediate states define karta hai.
animation keyframes, duration, easing aur repetition connect karta hai. Reduced-motion preference par animation disable ki gayi hai.
Try Yourself
<div class="dot" aria-hidden="true"></div>
<style>
.dot {
width: 60px;
height: 60px;
background: #222;
animation: bounce 1s ease-in-out infinite alternate;
}
@keyframes bounce {
to { transform: translateY(-24px); }
}
@media (prefers-reduced-motion: reduce) {
.dot { animation: none; }
}
</style>