How to create a breathing circle?

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.


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

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

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

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;


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

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:v: