Pulse Animation in CSS!
Hey fellow creators
You'd like to add a button with a pulse animation to your app? You can learn how to do it in CSS in less than a minute!
1. Create a button
This is a really simple step, but create a button in your HTML file:
<button>Go</button>
2. Let's style the button
Center the button as well as the text inside it, and make it a circle:
body{ font-family: Arial, Helvetica, sans-serif; background: #333;}button{ position: absolute; /* centering */ top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; /* centering the content */ justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 50%; /* make it a circle */ font-size: 20px; border: none; cursor: pointer;}
3. Create the pseudo-element.
Some are using box-shadow to achieve that stuff, me included before I knew it was bad for performance.
So I simply replaced box shadow by a pseudo-element that grows and disapears at the same time with the performant "transform" and "opacity" properties.
button::after { content: ''; display: block; position: absolute; z-index: -1; /* behind the parent */ width: 100%; height: 100%; border-radius: 50%; background: #f1f1f1; top: 0; left: 0; animation: pulse 1.4s infinite ease-out; /* animation configuration */}
Create the keyframe:
@keyframes pulse { to { transform: scale(1.4); opacity: 0; }}
And, there you go, the pseudo element will expand and hide at the time, thus creating what we want, with good performance (no repaint).
Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos
See you soon!
Enzo.
Original Link: https://dev.to/ziratsu/pulse-animation-in-css-3a06
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To