title: How can I get rid of one animation in a media query?
body: <p>I have two different css animations affecting the same word. This is the code I use for it:     </p>
  
  <pre><code>#welcome{
      font-size: 80px;
      color: #00FFFF;
      animation: welcomeAnimation infinite 4s,rotate 2s;/*2 animations*/
      animation-delay: 0s;
      animation-timing-function: linear;
      }
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>@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;
          }
  }
  </code></pre>
  
  <p>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?</p>