CSS Show the same animation in different ways on different devices

Issue

I have an element which has a class, for instance .anim. I want to achieve that when the user plays the animation on mobile, the element with the anim class should be turned blue, but on desktop it should be red. Is it even possible to achieve?

Here's the code what I've tried so far

var box = document.getElementsByClassName('box');
document.getElementById("play").addEventListener("click", () => {
  box[0].classList.add('anim');
});

.box {
  display: flex;
  width: 4rem;
  height: 4rem;
  border: 1px dashed gray;
}

.anim {
animation-name: rainbow;
animation-duration: .25s;
animation-timing-function: ease-in-out;
}

@media only screen and (min-width: 992px) { /* Desktop */
  @keyframes rainbow { 0% {background-color: unset;} 100% { background-color: red !important; } }
}

/* Mobile */
@keyframes rainbow { 0% {background-color: unset;} 100% { background-color: blue; } }

<div class="box"></div><br>
<button id="play">Play</button>

Solution

You cannot nest a @keyframe in a @media query, but you can nest other animation properties or try to achieve this with css variables.

.anim {
  --bg-color: blue;
  animation-name: rainbow;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
}

@media only screen and (min-width: 992px) {
  /* Desktop */
  .anim {
    --bg-color: red;
  }
}

/* Mobile */
@keyframes rainbow {
  0% {
    background-color: unset;
  }
  100% {
    background-color: var(--bg-color);
  }
}

const box = document.getElementsByClassName('box');
document.getElementById('play').addEventListener('click', () => {
  box[0].classList.add('anim');
  box[0].addEventListener('animationend', event => {
    event.currentTarget.classList.remove('anim');
  });
});

.box {
  display: flex;
  width: 4rem;
  height: 4rem;
  border: 1px dashed gray;
}

.anim {
  --bg-color: blue;
  animation-name: rainbow;
  animation-duration: 0.25s;
  animation-timing-function: ease-in-out;
}

@media only screen and (min-width: 992px) {
  /* Desktop */
  .anim {
    --bg-color: red;
  }
}


/* Mobile */
@keyframes rainbow {
  0% {
    background-color: unset;
  }
  100% {
    background-color: var(--bg-color);
  }
}

<div class="box"></div>
<br />
<button id="play">Play</button>

Answered By - Anton