Nick Solonko Nick Solonko - 5 months ago 16
CSS Question

How can I get rid of one animation in a media query?

I have two different css animations affecting the same word. This is the code I use for it:

#welcome{
font-size: 80px;
color: #00FFFF;
animation: welcomeAnimation infinite 4s,rotate 2s;/*2 animations*/
animation-delay: 0s;
animation-timing-function: linear;
}


When the width of the device browser is less than 800px, I only want the animation "welcomeAnimation" to play. I use a media query like this:

@media screen and (max-width: 800px){
#welcome{
font-size: 80px;
color: #00FFFF;
animation: welcomeAnimation infinite 4s;/*1 animation*/
animation-delay: 0s;
animation-timing-function: linear;
}
}


Both animations still play when I do this. How can I keep both animations as a default, but when the screen is less, play only one animation?

Answer

There isn't anything wrong with the code you've posted, besides the syntax of your comments. I've put it into a working demo below.

@keyframes welcomeAnimation {
  0% { color: #00FFFF; }
  50% { color: #008888; }
  100% { color: #00FFFF; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

#welcome {
  font-size: 80px;
  color: #00FFFF;
  animation: welcomeAnimation infinite 4s, rotate infinite 2s;
  animation-delay: 0s;
  animation-timing-function: linear;
}

@media screen and (max-width: 800px) {
  #welcome {
    font-size: 80px;
    color: #00FFFF;
    animation: welcomeAnimation infinite 4s;
    animation-delay: 0s;
    animation-timing-function: linear;
  }
}
<div id="welcome">
  Welcome
</div>

I've made one small change, just to make the effect easier to notice: I added "infinite" to the rotate animation. This isn't necessary to solve the problem.

Notice that if you run the snippet here in the answer, there is only one animation (since the snippet window is less than 800px wide) -- but if you launch it full page, it has both animations.

Or you can view the same demo on jsFiddle, where you can drag and resize the preview window to activate or de-activate the second animation.

So why didn't it work for you? It's probably a specificity issue, or it's because you are inserting comments with the wrong syntax.

If you have any comments in your real code that use a double-slash syntax, remove them and instead use comments that begin with /* and end with */.

If that doesn't fix the issue, you can test to see whether it's a specificity issue by changing your animation property inside the media query to use the !important exception, like so:

@media screen and (max-width: 800px) {
  #welcome {
    font-size: 80px;
    color: #00FFFF;
    animation: welcomeAnimation infinite 4s !important;
    animation-delay: 0s;
    animation-timing-function: linear;
  }
}

If that fixes your problem, then you have a specificity issue.

Do not leave the !important exception in your code. This exception is a useful debugging tool, but using it in production code will cause you headaches down the line.

Instead, read up on how to resolve specificity issues on the MDN.

In your case:

  1. Make sure the "normal version" and the media-queried version both use the same CSS selector. In the example you've posted here, they both simply use #welcome -- that is good. If you really want them to have different selectors, the media-queried one should be more specific than the other.
  2. Make sure the media-queried version is processed by the browser after the "normal version". If both sets of rules are in the same file, that just means putting the media-queried set of rules after the default set of rules. If they are in separate files, that means linking the media-queried file after the default file in your HTML.