Как создать импульсный эффект на изображение на пару секунд, когда страница загружается? ⇐ CSS

[Anonymous]

Я пытаюсь создать импульсный эффект на изображение, но до сих пор не работает. Я пытался сделать элемент Span < /code>, и он работает так: < /p>

html: < /p>

Код: Выделить всё

< /code>

css: < /p>

.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);
}
}
< /code>

Я хочу то же самое с этим изображением: < /p>

[url=javascript:void(0)]
[img]https://image.ibb.co/cNjXna/guided_inv_icon.png[/img]
[/url]
< /code>

Когда страница загружается, изображение должно иметь импульсный эффект или только получить изображение чуть больше в течение 2 секунд, чтобы указать интерактивность, а затем изображение должно сохранять его исходную форму. < /p>

Любые предложения? https://codepen.io/maketroli/pen/zyojym

[b] edit [/b] 

Мне нужно создать тот же эффект на изображении под желтым кругом. Желтый круг, изготовленный из Span 

, делает то, чего я хочу достичь с изображением ниже.

Подробнее здесь: https://stackoverflow.com/questions/445 ... -page-load