How to make css animation active only for some screen resolutions?

Question

I am creating an animated logo for website running on WordPress and I want to know if it is possible to make the css animation possible only for desktop resolutions. I think the animation would not work for mobile version and I want to have different css for mobile versions.

Is it possible to put the @keyframes into @media screen and (min-width: 1000px){...} ? Just combine it somehow?

Thank you.

Answer 1

Just use the animation property inside a media query.

@keyframes myKeyframe {
    from { top: 0; }
    to { top: 100px; }
}

@media screen and (min-width: 1000px) {
    #myDiv {
        animation: myKeyframe 1s;
    }
}