Добавляет анимацию к значкам сообщений и уведомлений форума

[baltun]

baltun разместил(а) новый ресурс:

Добавляет анимацию к значкам сообщений и уведомлений форума - Добавляет анимацию к значкам сообщений и уведомлений форума

Посмотреть вложение 38332
Добавьте следующий код в шаблон вашей активно используемой темы extra.less:

@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 {...

Посмотреть страницу этого ресурса...

 

[micrologic1]

Возможно кого то запарит регулярное мерцание, и можно сделать нативно. При обновлении страницы только анимацию сделает и остановится:

@keyframes xgtbell {
    0% {
        transform: rotate(0);
    }
    25% { /* Увеличиваем угол и уменьшаем долю времени для движения */
        transform: rotate(30deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        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);
    }
}
.js-badge--alerts.badgeContainer--highlighted {
    i {
        &:after {
            /* xgtbell: Длительность 0.5s (быстро), без задержки, проигрывание 1 раз, сохраняет конечное состояние */
            animation: xgtbell 0.5s forwards 1;
        }
    }
    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;
    /* xgtNotificationAnim: Остается как было, 1.25s длительность, проигрывание 1 раз */
    -webkit-animation: xgtNotificationAnim 1.25s 1 cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtNotificationAnim 1.25s 1 cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtNotificationAnim 1.25s 1 cubic-bezier(0.66, 0, 0, 1);
    animation: xgtNotificationAnim 1.25s 1 cubic-bezier(0.66, 0, 0, 1);
}
@keyframes xgtDM {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(30deg);
    }
    50% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(0);
    }
}
@-webkit-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-moz-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@-ms-keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
@keyframes xgtConversationsAnim {
    to {
        box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
}
.js-badge--conversations.badgeContainer--highlighted {
    i {
        &:after {
            /* xgtDM: Длительность 0.5s (быстро), без задержки, проигрывание 1 раз, сохраняет конечное состояние */
            animation: xgtDM 0.5s forwards 1;
        }
    }
    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;
    /* xgtConversationsAnim: Остается как было, 1.5s длительность, проигрывание 1 раз */
    -webkit-animation: xgtConversationsAnim 1.5s 1 cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: xgtConversationsAnim 1.5s 1 cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: xgtConversationsAnim 1.5s 1 cubic-bezier(0.66, 0, 0, 1);
    animation: xgtConversationsAnim 1.5s 1 cubic-bezier(0.66, 0, 0, 1);
}