CSS анимация для backgorund

Question

У меня есть такой код, он не работает

@keyframes epilepsy {
  0% {
    background: lime !important;
  }
  10% {
    background: red !important;
  }
  20% {
    background: white !important;
  }
  30% {
    background: blue !important;
  }
  40% {
    background: black !important;
  }
  50% {
    background: white !important;
  }
  60% {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp3TM1puW0YH1z7Jnee4aNjx4-xasgeTdAzQ&usqp=CAU) !important;
  }
  70% {
    background: magenta !important;
  }
  80% {
    background: #fc0349 !important;
  }
  90% {
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 19%, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 64%, rgba(246, 99, 0, 1) 83%, rgba(0, 0, 0, 1) 89%) !important;
  }
  100% {
    background: white !important;
  }
}

Этот код я вставляю в тег style на странице через панель разработчика, потом добавляю нужному элементу эти стили

animation-name:epilepsy;
animation-duration: 1s;
animation-iteration-count: infinite;

Но фон почему-то не меняется, хотя всё ж верно) Что здесь не так? Тут явно какая-то тупая ошибка, но битый час не найду

Вот весь код, который открывает окно и добавляет нужные стили через js

let vkCopy = window.open('https://vk.com/im');

setTimeout(() => {
  let styles_epilepsy = `
                .epilepsy {
                    animation-name:epilepsy;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                }

                @keyframes epilepsy {
                    0% {
                        background: lime !important;
                    }
                    10% {
                        background: red !important;
                    }
                    20% {
                        background: white !important;
                    }
                    30% {
                        background: blue !important;
                    }
                    40% {
                        background: black !important;
                    }
                    50% {
                        background: white !important;
                    }
                    60% {
                        background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp3TM1puW0YH1z7Jnee4aNjx4-xasgeTdAzQ&usqp=CAU) !important;
                    }
                    70% {
                        background: magenta !important;
                    }
                    80% {
                        background: #fc0349 !important;
                    }
                    90% {
                        background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,0,0,1) 19%, rgba(255,0,0,1) 50%, rgba(0,0,0,1) 64%, rgba(246,99,0,1) 83%, rgba(0,0,0,1) 89%) !important;
                    }
                    100% {
                        background: white !important;
                    }
                }

            `;

  let styleSheet_epilepsy = vkCopy.document.createElement("style");
  styleSheet_epilepsy.type = "text/css";
  styleSheet_epilepsy.innerText = styles_epilepsy;
  vkCopy.document.body.appendChild(styleSheet_epilepsy);

  vkCopy.document.body.classList.add('epilepsy');
}, 5000);

Answer 1

Уберите !important и всё заработает (вообще непонятно, зачем Вы его тут используете):

.div {
  height: 200px;
  animation: epilepsy 1s infinite;
}
@keyframes epilepsy {
  0% {
    background: lime;
  }
  10% {
    background: red;
  }
  20% {
    background: white;
  }
  30% {
    background: blue;
  }
  40% {
    background: black;
  }
  50% {
    background: white;
  }
  60% {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp3TM1puW0YH1z7Jnee4aNjx4-xasgeTdAzQ&usqp=CAU);
  }
  70% {
    background: magenta;
  }
  80% {
    background: #fc0349;
  }
  90% {
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 19%, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 64%, rgba(246, 99, 0, 1) 83%, rgba(0, 0, 0, 1) 89%);
  }
  100% {
    background: white;
  }
}

<div class="div"></div>

БЛОГ НА HUSL

CSS анимация для backgorund

Ответы (1 шт):