CSS validator throws parsing error with CSS animation media query

Question

this is interesting as I can't really find anything on the web really to do with why my code throws a parsing error. The code below shows i have a media query that basically changes a few elements and their properties.

When i validate this code it throws a parsing error because of the swim animation, when i remove this animation and re-validate the code it passes without any problems.

Can this be fixed or just something that can be ignored :) ?

@media (max-width: 1325px) {
  #chapter-one-background, #chapter-two-background, #chapter-three-background {
    height: 450px; }

  #sound-button {
    width: 21px; }

  .buttonCenter {
    padding: 50px 0px 20px 0px;}

  html {
    font-size: 1em; }

  h1 {
    font-size: 3em; }

  h2 {
    font-size: 2.027em; }

  h3 {
    font-size: 1.199em; }

  h4 {
    font-size: 1em; }

  .button-wrapper {
    padding-top: 50px; }
    .button-wrapper .buttons img {
      max-width: 90%; }

  .exchange-list img {
    max-width: 20%; }
  .exchange-list .list-float-right {
    width: 230px; }

  .article-center {
    width: 300px; }

  .article-info {
    width: 350px; }
    .article-info img:last-child {
      width: 100%; }

  #cloud-background {
    padding: 2% 2% 4% 2%; }

  .article-center-video {
    width: 400px; }
    .article-center-video .article-info-video {
      width: 400px; }

  .eyes-container {
    margin-top: 280px; }

  .sun {
    top: -300px; }

  #cowhead1 {
    top: 100px;
    left: 100px; }
    #cowhead1 img {
      width: 90px; }

  #hands-behind-left {
    height: 663px; }

  #chapter-four-background-left {
    height: 663px; }

  #cowhead2 {
    top: 100px;
    left: 180px; }
    #cowhead2 img {
      width: 90px; }

  #info2-chapter3 {
    padding-top: 80px; }

  #exchange-chapter3 {
    padding-top: 90px;
    left: 15%; }

  #info1-chapter3 {
    padding-top: 110px; }

  #chapter-four-background-right {
    width: 250px; }

  @keyframes swim {
    0% {
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px); }

    50% {
      -webkit-transform: translateX(500px);
      -moz-transform: translateX(500px);
      -ms-transform: translateX(500px);
      -o-transform: translateX(500px);
      transform: translateX(500px); }

    100% {
      -webkit-transform: translateX(1000px);
      -moz-transform: translateX(1000px);
      -ms-transform: translateX(1000px);
      -o-transform: translateX(1000px);
      transform: translateX(1000px); } } }

Validating code that use browser prefix will more or less always throw errors since that is basically invalid, and those you can ignore. What error code do you get? — Asons
– Asons, Commented Apr 15, 2017 at 13:28
Yeah, the prefix is not a problem that I'm aware of but i get a parsing error when the above code is ran within the CSS validator. If i remove the Swim keyframe towards the bottom of the code it will validate perfectly. I'm guessing its something to do with keyframes within media queries. — Mayo
– Mayo, Commented Apr 15, 2017 at 13:38
Yes, correct, move the keyframes rules outside the media query — Asons
– Asons, Commented Apr 15, 2017 at 13:38
The problem is these animations need to be within the media query as the animation needs to be resized on mobile devices ? Im guessing then this error just needs to be ignored ? — Mayo
– Mayo, Commented Apr 15, 2017 at 13:50
No, you should put the rules that has the actual animation property inside the media query and keep the keframes rules outside — Asons
– Asons, Commented Apr 15, 2017 at 13:51

Asons · Accepted Answer · 2017-04-15 14:11:32Z

1

You should put the classes that has the actual animation property inside the @media query and keep the @keframes rules outside

Done like that you still control the actual animation with the media query and it will pass the validator without error

@media (max-width: 1325px) {
  .class-that-animate {
    animation: swim 2s;
  }
}

@keyframes swim {
    0% {
      -webkit-transform: translateX(0px);
      -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
      -o-transform: translateX(0px);
      transform: translateX(0px); 
    }
    50% {
      -webkit-transform: translateX(500px);
      -moz-transform: translateX(500px);
      -ms-transform: translateX(500px);
      -o-transform: translateX(500px);
      transform: translateX(500px); 
    }
    100% {
      -webkit-transform: translateX(1000px);
      -moz-transform: translateX(1000px);
      -ms-transform: translateX(1000px);
      -o-transform: translateX(1000px);
      transform: translateX(1000px); 
    } 
}

For different translateX values on different device size, you make 2 rules and 2 keyframes (here without the prefixed values to make it easy to read)

@media (max-width: 1325px) {
  .class-that-animate {
    animation: swim 2s;
  }
}

@media (max-width: 800px) {
  .class-that-animate {
    animation: swim-mobile 2s;
  }
}

@keyframes swim {
    0% {
      transform: translateX(0px); 
    }
    50% {
      transform: translateX(500px); 
    }
    100% {
      transform: translateX(1000px); 
    } 
}

@keyframes swim-mobile {
    0% {
      transform: translateX(0px); 
    }
    50% {
      transform: translateX(250px); 
    }
    100% {
      transform: translateX(500px); 
    } 
}

edited Apr 15, 2017 at 14:11

answered Apr 15, 2017 at 13:58

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mayo Over a year ago

Yes this works but if you wanted to change the pixels for translateX on mobile then the keyframes would surely have to sit inside the media query ?

Asons Over a year ago

@Mayo No, you need 2 keyframes rules (which you will need either way), one for each media query ..... will update my answer in a sec

Asons Over a year ago

@Mayo Updated my answer

Mayo Over a year ago

Oh yeah of course!! haha silly me, thats super awesome though thank you! as i didn't know this before hand :) thank you so much mate!

Collectives™ on Stack Overflow

CSS validator throws parsing error with CSS animation media query

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related