CSS Show the same animation in different ways on different devices

Question

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>

Do you mean 'mobile' or do you mean 'viewport width less than x'? If you mean 'mobile' could you explain more what that means? (laptops are mobile, some devices have touch screens as well as mice, some tablets are pretty wide etc). — A Haworth, Jun 17 '22 at 18:03

score 0 · Answer 1 · answered Jun 17 '22 at 17:40

I had same issue and ended up solving with code below, but this approach is discouraged by mdn. Also here is a list of possible values you can use.

windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
typeOfOS = window.navigator.platform;

if (this.windowsPlatforms.includes(this.typeOfOS)) {
     //do for windows
}

score 0 · Accepted Answer · answered Jun 20 '22 at 05:42

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>

CSS Show the same animation in different ways on different devices

2 Answers2