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

Question

[Константин]

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

https://chydo-deti.ru/

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

новая верстка

Answer 1

[Ярослав Иванов]

@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);
    }
}

Comments

[Константин]

спасибо огромное!

Answer 2

[Владислав Черненко]

Потому что у вас не указан способ анимации (что должно происходить)...
Этого мало:

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);
    }
}

Это для одной из... остальным звездам правьте как нравится.

Comments

[Константин]

спасибо огромное!

[Владислав Черненко]

добавил кусок для одной звезды