How to create a breathing circle?

[titimoon]

Hi everyone!

Does anyone know how to create a breathing circle with CSS animation? In other words, I want to create a circle (or any shape) that expands in & out.

Cheers,
Atefe

[Sboonny]

you can change the scale of the button when you hover over it,
more info about translate: scale()
scale() - CSS: Cascading Style Sheets | MDN (mozilla.org)

after setting the scale, you have to set transistion to give it the animated feeling.
CSS Transitions (w3schools.com)

[titimoon]

I found some websites explaining how to do it, but what you suggested sounds like a smart shortcut! I’ll try it. Thanks a lot

[titimoon]

I tried to follow what you recommended but it doesn’t move!

This is the code I wrote, would be happy if you could have a look:

div {
position: relative;
height: 100px;
width: 100px;
background-color: pink;
border-radius: 50%;

}

#circle {
animation-name: breathing;
animation-duration: infinite;
}

@keyframes breathing {

0% {
transform: scale(1.5);
background-color: blue;
}

50% {
transform: scale(1);
background-color: white;
}

100% {
transform: scale(0.5);
background-color: pink;
}
}

Breathing

[Sboonny]

you have done the hard part of setting the @keyframe well done.

as far as I know you can’t set the animation-duration to infinite
but you can set the number of times the animation runs to infinite
by setting animation-iteration-count

animation-name: breathing;
animation-iteration-count: infinite;

so right now your animation-duration is doing nothing, because it has the wrong value, so dive into the doc just skimming through it will be enough.
oh and check animation-direction

CSS Animations