TUT Adds animation to forum message and notification icons animation

[OneHub]

Add the following code to your active theme's extra.less template :

@keyframes xgtbell {
0% {transform: rotate(0);}
10% {transform: rotate(30deg);}
20% {transform: rotate(0);}
80% {transform: rotate(0);}
90% {transform: rotate(-30deg);}
100% {transform: rotate(0);}}
@-webkit-keyframes xgtNotificationAnim {
to {box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);}}
@-moz-keyframes xgtNotificationAnim {
to {box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);}}
@-ms-keyframes xgtNotificationAnim {
to {box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);}}
@keyframes xgtNotificationAnim {
to {box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);}}
.badgeContainer--highlighted {i { &:after {
animation: xgtbell 1s 1s both infinite;}}
border: none; 
box-shadow: 0 0 0 0 rgba(225, 228, 227, 0.7);
border-radius: 10%;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
-webkit-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: xgtNotificationAnim 1.25s infinite cubic-bezier(0.66, 0, 0, 1);}

 

[OneHub]

updated and optimized for 2.3.6

/* Hiệu ứng rung chuông (Bell Shake) */
@keyframes xgtBell {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(30deg); }
  20%  { transform: rotate(0); }
  80%  { transform: rotate(0); }
  90%  { transform: rotate(-30deg); }
  100% { transform: rotate(0); }
}

/* Hiệu ứng sóng lan tỏa (Pulse Glow) */
@keyframes xgtPulseGlow {
  to {
    box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
  }
}

/* Tối ưu container thông báo có trạng thái nổi bật */
.badgeContainer--highlighted {
  position: relative;
  border: none;
  border-radius: 10%;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;

  animation: xgtPulseGlow 1.25s infinite cubic-bezier(0.66, 0, 0, 1);

  i:after {
    content: '';
    display: inline-block;
    animation: xgtBell 1s infinite both;
  }
}