How to turn off css animation at specific breakpoint?

user_10620082 0
Viewed 335

I would like to stop a certain effect that I built in CSS when it gets to mobile. I know it for jQuery 

if ( $(window).width() > 766) {}

But I have not stumbled onto a css solution. Here is my animations.

@-webkit-keyframes slides{
0%{
    -webkit-transform: scale(1.5,1.5);
}
100%{
    -webkit-transform: scale(1,1) translateY(-40%); 
}
}

@-webkit-keyframes Fade{
from{
    opacity: 0;
}
to{
    opacity: 1;
}
}

@-webkit-keyframes up{
from{
    -webkit-transform: translateY(0);
}
to{
    -webkit-transform: translateY(-40%);
}
}
animation css
1 Answers
@media only screen and (max-width: 800px) {
* {
-webkit-animation: none !important;
-moz-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
}
user_106200820
Related