Простой пример того, как реализовать анимацию пульсации, используя HTML и CSS. <pre class="ql-syntax" spellcheck="false">&lt;span class="pulse"&gt;&lt;/span&gt;
﻿
.pulse {
&nbsp; margin:100px;
&nbsp; display: block;
&nbsp; width: 22px;
&nbsp; height: 22px;
&nbsp; border-radius: 50%;
&nbsp; background: #cca92c;
&nbsp; cursor: pointer;
&nbsp; box-shadow: 0 0 0 rgba(204,169,44, 0.4);
&nbsp; animation: pulse 2s infinite;
}
.pulse:hover {
&nbsp; animation: none;
}

@-webkit-keyframes pulse {
&nbsp; 0% {
&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
&nbsp; }
&nbsp; 70% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
&nbsp; }
&nbsp; 100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
&nbsp; }
}
@keyframes pulse {
&nbsp; 0% {
&nbsp;&nbsp;&nbsp; -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
&nbsp;&nbsp;&nbsp; box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
&nbsp; }
&nbsp; 70% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0 0 0 10px rgba(204,169,44, 0);
&nbsp; }
&nbsp; 100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0 0 0 0 rgba(204,169,44, 0);
&nbsp; }
}
</pre>

64f2a101fa89b99e50efbeee62834646_puls.gif

Простой пример того, как реализовать анимацию пульсации, используя HTML и CSS

Хэштег: #css

CSS анимация пульсации