Почему не работает анимация у звездочек?

Меняю верстку, в доноре звездочки в баннере качаются из стороны в сторону.

https://chydo-deti.ru/

У меня идентичные свойства у звездочек, но они не качаются.

новая верстка
  • Вопрос задан
  • 92 просмотра
Решения вопроса 2
space2pacman
@space2pacman Куратор тега CSS
Просто царь.
k3bstmrzerpaciz0ritr5k3dtuw.png

@keyframes star-rotate{
    0% {
        transform: matrix3d(0.993184, 0.116555, 0, 0, -0.116555, 0.993184, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    50% {
        transform: matrix3d(0.995187, -0.0979929, 0, 0, 0.0979929, 0.995187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(0.992688, -0.12071, 0, 0, 0.12071, 0.992688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes star-rotate-2{

    0% {
        transform: matrix3d(0.992688, -0.12071, 0, 0, 0.12071, 0.992688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    50% {
        transform: matrix3d(0.995187, -0.0979929, 0, 0, 0.0979929, 0.995187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(0.993184, 0.116555, 0, 0, -0.116555, 0.993184, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}
Ответ написан
vladchv
@vladchv
WordPress Developer
Потому что у вас не указан способ анимации (что должно происходить)...
Этого мало:
animation: star-rotate 5s linear alternate infinite;

Должно быть еще само правило для анимации, например:
@keyframes star-rotate {
   from { ... }
   to { ... }
}

В вашем случае это:
@keyframes star-rotate{
    0% {
        transform: matrix3d(0.993184, 0.116555, 0, 0, -0.116555, 0.993184, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    50% {
        transform: matrix3d(0.995187, -0.0979929, 0, 0, 0.0979929, 0.995187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(0.992688, -0.12071, 0, 0, 0.12071, 0.992688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

Это для одной из... остальным звездам правьте как нравится.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы