Jak utworzyć efekt pulsu na obrazku przez kilka sekund po załadowaniu strony? - jquery, html, css

Próbuję stworzyć efekt impulsu na obrazie, ale jak dotąd nie działa. Próbowałem span element i działa w ten sposób:

HTML:

<span class="pulse"></span>

CSS:

.pulse {
margin:100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}

@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@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 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px 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);
}
}

Chcę to samo z tym obrazem:

<a href="javascript:void(0)" class="item">
<img src="/images/https://image.ibb.co/cNjXna/guided_inv_icon.png" alt="">
</a>

Gdy strona się ładuje, obraz powinien mieć efekt pulsacyjny lub powiększać obraz tylko na 2 sekundy w celu wskazania interaktywności, a następnie obraz powinien zachować swój pierwotny kształt.

Jakieś sugestie?

Stworzyłem ten długopis: https://codepen.io/maketroli/pen/ZyOJYM

EDYTOWAĆ

Muszę stworzyć ten sam efekt na obrazie poniżej żółtego koła. Żółte kółko wykonane z span robi to, co chcę osiągnąć dzięki obrazowi poniżej.

Odpowiedzi:

2 dla odpowiedzi № 1

Możesz zastosować tę samą animację do obrazu, podobnie jak w przypadku animacji span element.

.item img{
animation: pulse 2s infinite;
}

Sprawdź to długopis

EDYTOWAĆ

Aby wyświetlić większy obraz przez 2 sekundy, a następnie zmniejszyć go do normalnego rozmiaru, dodałem magnified animacja.

@keyframes magnified{
0%{
transform: scale(1.2,1.2);
}
70%{
transform: scale(1.2,1.2);
}
100%{
transform: scale(1,1);
}
}

Możesz dodać wiele animacji do elementu:

.item img{
animation: pulse 2s infinite, magnified 2s 1;
}

Zaktualizowałem długopis aby pokazać te efekty.

---

3 dla odpowiedzi № 2

Możesz użyć poniższych linii kodu, aby wykonać pulsacyjny efekt animacji za pomocą HTML i CSS3: Tutaj użyłem właściwości klatki kluczowej css do wykonania efektu animacji.

<span class="pulse"></span>

<style>
.pulse {
margin:100px;
display: block;
width: 52px;
height: 52px;
border-radius: 50%;
background: #ff8717;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.pulse: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);
}
}


</style>

---