XF 2.0 Мигающая обводка в группе пользователя

[Jdatiko]

1-й скрин: Имеется овальная шапка группы пользователя "команда проекта". Специально для примера обводку сделал зеленой, чтоб было видно. Мне нужно, чтоб эта зеленая обводка на шапке пользователя пульсировала (желательно, когда даже пользователь не онлайн).

Код

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}
[/ISPOILER]

Если вставить в код пульсацию, то:

Код с пульсацией

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
animation-name: pulse;
animation-duration: 1.5s;
animation-iteration-count: infinite;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

См.2 скрин

Пульсирует весь овал. Делать второй класс - пропадает обводка самой группы пользователя и мигает также, но уже без овала, а лишь обводка и текст. Надеюсь кто-то сможет помочь, потому что я уже весь мозг сломал. Спасибо.

 

[LEGENDARY]

Так что именно то должно пульсировать? Юзербаннер или аватар?

 

[Jdatiko]

Так что именно то должно пульсировать? Юзербаннер или аватар?

Аватар у меня мигает как надо. Он в порядке. Есть юзербаннер - "команда проекта". Золотая закраска и зеленая обводка этого баннер. Мне нужно, чтоб обводка баннера мигала, а сам баннер был статичный.

 

[LEGENDARY]

В extra.less

@keyframes pulseBanner {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(127,185,0, 0.4);
    box-shadow: 0 0 0 0 rgba(127,185,0, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 5px rgba(127,185,0, 0);
      box-shadow: 0 0 0 5px rgba(127,185,0, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(127,185,0, 0);
      box-shadow: 0 0 0 0 rgba(127,185,0, 0);
  }

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
animation-name: pulseBanner;
animation-duration: 1.5s;
animation-iteration-count: infinite;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

Попробуй так.

OFFTOP

Если правильно понял, конешно

 

[CrazyHackGUT]

extra.css

Раздел видели?)

 

[LEGENDARY]

Раздел видели?)

на автомате(9

 

[azmg]

Ну или так.

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
border-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
animation: pulseBanner 1.5s linear infinite;
}
@keyframes pulseBanner {
    0% {border-color: #a4f000;}
    50% {border-color: #5e8a00;}
    100% {border-color: #a4f000;}
}

 

[Jdatiko]

В extra.less

@keyframes pulseBanner {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(127,185,0, 0.4);
    box-shadow: 0 0 0 0 rgba(127,185,0, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 5px rgba(127,185,0, 0);
      box-shadow: 0 0 0 5px rgba(127,185,0, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(127,185,0, 0);
      box-shadow: 0 0 0 0 rgba(127,185,0, 0);
  }

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
animation-name: pulseBanner;
animation-duration: 1.5s;
animation-iteration-count: infinite;
border-left-color: #7fb90087;
border-top-color: #7fb90087;
border-right-color: #7fb90087;
border-bottom-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
border-left-radius: 3px solid #B8860B;
border-right-radius: 3px solid #B8860B;
}

Попробуй так.

OFFTOP

Если правильно понял, конешно

Вставил =)

 

[Jdatiko]

Ну или так.

.style-com {
color: white;
font-weight: bold;
background-color: #B8860B;
border: 3px solid #B8860B;
border-color: #7fb90087;
box-shadow: 0px 0px 10px 3px hsla(79, 99%, 36%, 0.16862745098039217);
animation: pulseBanner 1.5s linear infinite;
}
@keyframes pulseBanner {
    0% {border-color: #a4f000;}
    50% {border-color: #5e8a00;}
    100% {border-color: #a4f000;}
}

господи, спасибо! Заработало! :3

Спасибо огромное всем, кто помогал.

Раздел видели?)

Мона закрывать тему :3

 

[azmg]

господи

OFFTOP

У меняж так ЧСВ будет зашкаливать ?