Come creare un effetto pulsato su un'immagine per un paio di secondi quando la pagina viene caricata? - jquery, html, css

Sto cercando di creare un effetto a impulsi su un'immagine ma non funziona finora. Ho provato a span elemento e funziona così:

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);
}
}

Voglio lo stesso con questa immagine:

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

Quando la pagina viene caricata, l'immagine dovrebbe avere un effetto a impulsi o ingrandirla solo per 2 secondi per indicare l'interattività e quindi l'immagine dovrebbe mantenere la sua forma originale.

Eventuali suggerimenti?

Ho creato questa penna: https://codepen.io/maketroli/pen/ZyOJYM

MODIFICARE

Devo creare lo stesso effetto nell'immagine sotto il cerchio giallo. Il cerchio giallo fatto dal span sta facendo quello che voglio ottenere con l'immagine qui sotto.

risposte:

2 per risposta № 1

Puoi applicare la stessa animazione all'immagine, in modo simile a come hai applicato l'animazione a span elemento.

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

Controlla questo penna

MODIFICARE

Per mostrare un'immagine più grande per 2 secondi e poi ridurla alle dimensioni normali, ho aggiunto il magnified animazione.

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

E puoi aggiungere più animazioni all'elemento:

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

Ho aggiornato il penna per mostrare questi effetti.

---

3 per risposta № 2

Puoi usare le seguenti righe di codice per eseguire effetti di animazione pulsante usando HTML e CSS3: Qui ho usato la proprietà keyframe di css per eseguire effetti di animazione.

<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>

---