Мигающий значок "Уведомления" и "Онлайн" пользователя

Добрый день, подскажите, пожалуйста, как сделать также как здесь мигание значка уведомлений и если пользователь в сети чтобы зеленый кружочек тоже мигал.

Как он должен мигать, исчезать и появляться или как тень, которая отбрасывает свет вокруг элемента?

Как он должен мигать, исчезать и появляться или как тень, которая отбрасывает свет вокруг элемента?

Добрый день, исчезать и появляться, хотя и другой вариант тоже интересен.

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

От рисуйте гифку, что именно вы хотите,  по данной гифке уже добавим стили. 

@keyframes blink { 0%{ color:white; } 100%{ color:#33bd66; } }
 
.icms-user-avatar.peer_online:after {
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

Простите, пожалуйста, я новичок, а в какой путь это добавить? 

 Александр, 

Откройте файл /templates/modern/scss/theme/_custom.scss и вставьте туда 

@-webkit-keyframes blink {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }
 
      @keyframes blink {
        0% {opacity: 0;}
        100% {opacity: 1;}
}
 
.icms-user-avatar.peer_online:after {
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

Потом зайдите в админку, Настройка темы — Сохранить и скомпилировать SCSS

Проверил — моргает.

 Александр, 

Откройте файл /templates/modern/scss/theme/_custom.scss и вставьте туда 

@-webkit-keyframes blink {
        0% {opacity: 0;}
        100% {opacity: 1;}
      }
 
      @keyframes blink {
        0% {opacity: 0;}
        100% {opacity: 1;}
}
 
.icms-user-avatar.peer_online:after {
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

Потом зайдите в админку, Настройка темы — Сохранить и скомпилировать SCSS

Проверил — моргает.

Спасибо, завтра попробую 🙏

@keyframes blink { 0%{ color:white; } 100%{ color:#33bd66; } }
 
.icms-user-avatar.peer_online:after {
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

Спасибо большое, работает. А также, но с уведомлениями как на instantcms не поможете? 

@keyframes blink { 0%{ opacity: 0; } 100%{ opacity: 1; } }
 
.counter.badge, .icms-user-avatar.peer_online:after {
      -webkit-animation: blink 1s infinite;
      animation: blink 1s infinite;
}

Большое спасибо!