Стильный анимированный баннер пользователей

[Ban]

Не будем касаться шага первого и второго, они сейчас не важны, шаг третий, где то взят (это не не возбраняется), но подогнан просто методом тыка :)
1. Используется класс message-userBanner, это значит анимация применится только к баннерам в сообщениях, лучше использовать userBanner
2. Класс shine span, ну явно из кода исходника и ни к чему в данный момент не относится.
3. Используя префиксы браузеров, то и для всех надо указывать не только для хрома и мазилы:

animation: animate-shine 2s ease-out infinite;
-webkit-animation: animate-shine 2s ease-out infinite;
-moz-animation: animate-shine 2s ease-out infinite;

но как бы современные браузеры обходятся уже без префиксов во многих случаях.
4. Анимация указана одна animate-shine, а ключевых кадров для двух и снова префиксы только для хрома:

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

не указаны для нее свойства.
В итоге предлагаю сделать код третьего шага таким:

.userBanner {
    position: relative;
    &:after {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;
        animation: animate-shine 2s ease-out infinite;
    }
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 0;
        width: 100%;
    }
}

Немного сдвинул ключевой кадр

А как тут цвет фона баннера изменить бакгроуд это цвет эффекта