Атрибут, изменяемый анимацией и доступный по [attribute = value]

Question

В настоящее время я пытаюсь создать анимацию, которая изменяет атрибут, к которому может обращаться [attribute = value], например:

.test {
Animation: someAnimation 5s infinite;
}
@keyframes someAnimation{
    20% {someAttribute: someValue;}
    40% {someAttribute: someValue;}
}
.test[someAttribute=someValue]{
background-color: red;
}

Каким будет SomeAttribute, если что-нибудь?

Примечание: я явно ищу цвет фона, который нужно изменить, набрав SomeAttribute

Answer 1

Вы можете настроить таргетинг элемента в CSS с помощью атрибутов, но вы можете изменить их. Для этого вам нужен javascript.

.test-element {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  width: 100px;
  height: 100px;
}

[data-pickMe="true"] {
  background-color: salmon;
}

<div class="test-element" data-pickMe="true">Test</div>