Recently, I've been experimenting with CSS keyframe animation using the code below:
.pulse-animation {
margin: 50px;
display: block;
width: 52px;
height: 52px;
border-radius: 50%;
background: #ff8717;
cursor: pointer;
animation: pulse 2s infinite;
float: left;
}
.pulse-animation:hover {
animation: none;
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
}
}
<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />
I attempted to modify the animation behavior for hover only, but unfortunately, it didn't produce the desired results. Even after changing the hover animation, I still couldn't get it to work correctly. Can anyone offer some assistance or guidance?