Wie erstelle ich beim Laden der Seite für ein paar Sekunden einen Pulseffekt auf ein Bild?

Question

Ich versuche, einen Impuls-Effekt auf ein Bild zu erstellen, aber es funktioniert nicht so weit. Ich habe auf ein span Element ausprobiert und es funktioniert wie folgt aus:

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

ich mit diesem Bild auf die gleiche wollen:

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

Wenn die Seite geladen wird, sollte das Bild einen Pulseffekt haben oder das Bild nur für 2 Sekunden ein wenig vergrößern Um Interaktivität anzuzeigen, sollte das Bild seine ursprüngliche Form beibehalten.

Irgendwelche Vorschläge?

ich diesen Stift erstellt habe: https://codepen.io/maketroli/pen/ZyOJYM

EDIT

Ich brauche die gleiche Wirkung in dem Bild unter dem gelben Kreis zu erstellen. Der gelbe Kreis aus der span macht, was ich mit dem Bild unten erreichen möchte.

Answer 1

Sie können die gleiche Animation auf das Bild anwenden, ähnlich wie Sie die Animation auf das Element span angewendet haben.

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

Schauen Sie sich diese pen

EDIT

Für ein größeres Bild für 2 Sekunden zeigt und dann auf die normale Größe zu reduzieren, habe ich hinzugefügt, um die magnified Animation.

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

Und Sie können mehrere Animationen auf das Element hinzufügen:

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

Ich habe die pen diese Effekte zu zeigen, aktualisiert.

Answer 2

Sie können die folgenden Codezeilen verwenden, um den pulsierenden Animationseffekt mithilfe von HTML und CSS3 auszuführen: Hier habe ich die Keyframe-Eigenschaft von css verwendet, um den Animationseffekt auszuführen.

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