Sometimes it amazes me the powerful things we can do with CSS. Recently, I needed to make an element pulse (i.e. grow and shrink repeatedly). I was able to do this with a few lines of CSS without using any JavaScript.
Pulsing Button
@keyframes pulse {
from { transform: scale(1); }
50% { transform: scale(0.85); }
to { transform: scale(1); }
}
.fe-pulse {
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
}
Pulsing Button with Pause on Hover
It was also determined that it would be nice if the pulsing stopped when the element was hovered over (or in focus). To that end, I’m removing the animation-name
on hover or focus. I could have used the animation-play-state property instead, however I wanted the element to be full size when hovered (or focused). Using animation-play-state: paused;
would have caused the animation to pause (possibly mid-animation, when the element was shrunken).
@keyframes pulse {
from { transform: scale(1); }
50% { transform: scale(0.85); }
to { transform: scale(1); }
}
.fe-pulse-w-pause {
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.fe-pulse-w-pause:hover,
.fe-pulse-w-pause:focus {
animation-name: unset;
}
Browser Support
CSS animations are well supported across many browsers, see Can I use css-animation. If a browser does not support CSS animations, it degrades gracefully by simply not showing the pulsing animation.
Thanks for this, very helpful!
thanks for your tutorial.
I appreciate it.
como uso esta animação bno elementor?
> How do i use this animation in elementor?
I don’t know. I don’t use Elementor.
Eu não sei. Eu não uso Elementor.
Translation manually created with Google Translate.
Obrigado Alan!! Deus te abençoe amigo
That what i was searching for, thanks
I am using that pulsing animation on my site https://zabezpiecz-auto.pl/
Estou usando o pulse no site para gerar politica de privacidade.