Hello Readers!

The below code is an example of Keyframe animation using CSS3-

HTML-

<div class="parent">
    <div class="circle bulge"></div>
</div>

CSS-

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
    height: 500px;
}

.circle {
    background-color:#0088BF;
    width: 200px;
    height: 200px;
    border-radius:400px;
}

.bulge {
    -webkit-animation: bulge 1s 1s infinite ease-in-out alternate;
    -moz-animation: bulge 1s 1s infinite ease-in-out alternate;
    -ms-animation: bulge 1s 1s infinite ease-in-out alternate;
    -o-animation: bulge 1s 1s infinite ease-in-out alternate;
    animation: bulge 1s 1s infinite ease-in-out alternate;
}

@-webkit-keyframes bulge {
    0% {
        width: 200px;
        height: 200px;
    }
    100% {
        width: 400px;
        height: 400px;
    }
}
@-moz-keyframes bulge {
    0% {
        width: 200px;
        height: 200px;
    }
    50% {
        width: 400px;
        height: 400px;
    }
    100% {
        width: 200px;
        height: 200px;
    }
}
@-ms-keyframes bulge {
    0% {
        width: 200px;
        height: 200px;
    }
    50% {
        width: 400px;
        height: 400px;
    }
    100% {
        width: 200px;
        height: 200px;
    }
}
@-o-keyframes bulge {
    0% {
        width: 200px;
        height: 200px;
    }
    50% {
        width: 400px;
        height: 400px;
    }
    100% {
        width: 200px;
        height: 200px;
    }
}
@keyframes bulge {
    0% {
        width: 200px;
        height: 200px;
    }
    50% {
        width: 400px;
        height: 400px;
    }
    100% {
        width: 200px;
        height: 200px;
    }
}

Below is the output generated by using above HTML and CSS code