Zoom in zoom out animation in CSS

We are creating an animation class .zoom-in-out-element, make it repeat forever, and apply it to HTML element.

Explain the detail of the animation set:

• using zoom-in-zoom-out is the name of my animation
• using ease is the easing function for control animation speed curve
• using infinite : is looping forever
• @keyframes zoom-in-zoom-out : define zoom-in-zoom-out and start animation from 0% ,75% and 100%.

Here is Css

/* animation */
.zoom-in-out-element {
	animation: zoom-in-zoom-out 3s ease infinite;
}

@keyframes zoom-in-zoom-out {
	0% {
		scale: 75%;
	}

	50% {
		scale: 100%;
	}

	100% {
		scale: 75%;
	}
}

Here is HTML

<h3 class="fw-bolder h1 zoom-in-out-element">
<?php esc_html_e("Upcoming Activities/ Trainings"); ?>
</h3>

Result and Demo

Category :