Pure CSS zoom animation based on timer? - css

Question

I know I can do a zoom animation in CSS, when hovering a button for example.
But I was wondering if I could make the zoom animation based on a specific timer.
Like a short zoom in and zoom out animation during 0.5s, which comes back every 5 seconds.
Something like the button on this URL https://www.laboutiquetrend.com/collections/produits/products/epilateur-corporel-2-0 (scroll a bit to make it appear)
Again, it would help if this is only CSS, since I apply custom CSS on the elements of a theme.
Let me know thanks :)

Answer 1

I made some modifications, it's now pure CSS however it's a bit poor.
* {
margin: 0;
padding: 0;
}
div {
background-color: #ccc333;
width: 300px;
height: 90px;
margin: 20px auto;
animation-name: pulse;
/*animation-fill-mode: both;*/
animation-duration: 2s;
animation-iteration-count: infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
15% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
15% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
30% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
<div></div>