Эффект пульсации элемента на чистом CSS

Задумались, как сделать пульсирующий элемент на чистом css/html. В данной статей, мы покажем самый простой пример того, как реализоваться анимацию пульсацию, используя html и css.

Html пульсации элемента

  
<!DOCTYPE html>
<html>
<head>
 <title>Простой пример CSS анимация пульсации</title>
</head>
<body>
 <div class="pulse"></div>
</body>
</html>
  

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

Это базовый CSS. Если немного поиграть, Вы можете увеличить диаметр пульсации, изменить цвет пульсации, изменить цвет элемента.