I am attempting to create a unique CSS animation that involves rotating an image and giving it a pulsing effect similar to the animation seen on Shazam's button. Here is the code that I have so far. While the image is successfully rotating, I am running into issues when trying to apply a scale transformation to create the pulsating effect.
.animated {
animation-duration: 5s;
-webkit-animation-duration: 5s;
animation-fill-mode: none;
-webkit-animation-fill-mode: none;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes rotate {
0% {
/*transform: scale(1);*/
transform-origin: center center;
transform: rotate(-360deg);
}
50% {
/*transform: scale(1.1);*/
transform-origin: center center;
}
100% {
/*transform: scale(1);*/
transform-origin: center center;
transform: rotate(0);
}
}
@-webkit-keyframes rotate {
0% {
/*-webkit-transform: scale(1);*/
-webkit-transform-origin: center center;
-webkit-transform: rotate(-360deg);
}
50% {
/*-webkit-transform: scale(1.1);*/
-webkit-transform-origin: center center;
}
100% {
/*-webkit-transform: scale(1);*/
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
}
}
.rotate {
animation-name: rotate;
-webkit-animation-name: rotate;
}
Is there anyone who can offer some guidance or assistance with this issue? Any help would be greatly appreciated.