Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 21, 2021 09:29 am GMT

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To