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