Question

这很有趣，因为我无法在网上找到任何与我的代码抛出解析错误的原因有关的内容。下面的代码显示我有一个媒体查询，它基本上改变了一些元素及其属性。

当我验证此代码时，由于游泳动画，它会抛出解析错误，当我删除此动画并重新验证它通过的代码时没有任何问题。

这可以修复或只是可以忽略的东西:)？

@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); } } }

Answer 1

您应该将具有实际animation属性的类放在@media查询中，并将@keframes规则保留在

之外

完成之后您仍然使用媒体查询控制实际动画，它将无错误地传递验证器

@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); 
    } 
}

对于不同设备大小的不同translateX值，您可以制作2个规则和2个关键帧（此处没有带前缀的值以便于阅读）

@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); 
    } 
}

CSS验证器使用CSS动画媒体查询抛出解析错误

1 个答案: