css - Webkit 不适用于媒体屏幕

Question

我正在尝试为移动用户应用不同的 webkit 动画，但是在验证我的 css 时我遇到了很多错误。显然我试过的验证器不喜欢使用@media screen。我的代码可以在下面的代码片段中查看。

body {
    background-color:#473D32
}

@font-face {
    font-family: "Toxic";
    src: url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/metalgothic.ttf) format("truetype"),
         url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/metalgothic.woff) format("woff");
}

@-webkit-keyframes font-effect-toxic-keyframes {
  0% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #32cd32, 0.01em -0.05em 0.15em #2db82d, 0.02em -0.15em 0.2em #28a428, 0.04em -0.20em 0.3em #238f23,0.05em -0.25em 0.4em #238f23, 0.06em -0.2em 0.9em #1e7b1e, 0.1em -0.1em 1.0em #196619;
  }
  25% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.05em 0.17em #32cd32, 0.04em -0.12em 0.22em #2db82d, 0.04em -0.13em 0.27em #28a428, 0.05em -0.23em 0.33em #238f23, 0.07em -0.28em 0.47em #238f23, 0.1em -0.3em 0.8em #1e7b1e, 0.1em -0.3em 0.9em #196619;
  }
  50% {    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #32cd32, 0.01em -0.05em 0.15em #2db82d, 0.02em -0.15em 0.2em #28a428, 0.04em -0.20em 0.3em #238f23,0.05em -0.25em 0.4em #238f23, 0.06em -0.2em 0.9em #1e7b1e, 0.1em -0.1em 1.0em #196619;
  }
  75% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.06em 0.18em #32cd32, 0.05em -0.15em 0.23em #2db82d, 0.05em -0.15em 0.3em #28a428, 0.07em -0.25em 0.4em #238f23, 0.09em -0.3em 0.5em #238f23, 0.1em -0.3em 0.9em #1e7b1e, 0.1em -0.3em 1.0em #196619;
  }
  100% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #32cd32, 0.01em -0.05em 0.15em #2db82d, 0.02em -0.15em 0.2em #28a428, 0.04em -0.20em 0.3em #238f23,0.05em -0.25em 0.4em #238f23, 0.06em -0.2em 0.9em #1e7b1e, 0.1em -0.1em 1.0em #196619;
  }
}

.font-effect-toxic-animation {
  -webkit-animation-duration:0.8s;
  -webkit-animation-name:font-effect-fire-toxic-keyframes;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
  color: #ffe;
}

@media screen and (max-width: 500px) {
.font-effect-toxic-animation {
  -webkit-animation-name:color-change;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate-reverse;
}


    @-webkit-keyframes color-change {
        0% { color: #32cd32; }
        10% { color: #2db82d; }
        20% { color: #28a428; }
        30% { color: #238f23; }
        40% { color: #1e7b1e; }
        50% { color: #196619; }
        60% { color: #1e7b1e; }
        70% { color: #238f23; }
        80% { color: #28a428; }
        90% { color: #2db82d; }
        100% { color: #32cd32; }
    }
}

<span style="color:"><span style="color:#2f4f4f;text-shadow:black 5px 5px 10px; font-size:28px; font-family:Toxic;-webkit-animation-duration:0.8s;   -webkit-animation-name:font-effect-toxic-keyframes;   -webkit-animation-iteration-count:infinite;   -webkit-animation-direction:alternate;" class="font-effect-toxic-animation">Blind_Guardian</span>

感谢您的回答!

Answer 1

完成。

 body {
  background-color: #473D32
}

@font-face {
  font-family: "Toxic";
  src: url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/metalgothic.ttf) format("truetype"), url(https://dl.dropboxusercontent.com/spa/yf4cv83buq5647x/tappedout/public/metalgothic.woff) format("woff");
}

.font-effect-toxic-animation {
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: font-effect-toxic-keyframes;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  color: #ffe;
}
@-webkit-keyframes font-effect-toxic-keyframes {
  0% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #32cd32, 0.01em -0.05em 0.15em #2db82d, 0.02em -0.15em 0.2em #28a428, 0.04em -0.20em 0.3em #238f23, 0.05em -0.25em 0.4em #238f23, 0.06em -0.2em 0.9em #1e7b1e, 0.1em -0.1em 1.0em #196619;
  }
  25% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.05em 0.17em #32cd32, 0.04em -0.12em 0.22em #2db82d, 0.04em -0.13em 0.27em #28a428, 0.05em -0.23em 0.33em #238f23, 0.07em -0.28em 0.47em #238f23, 0.1em -0.3em 0.8em #1e7b1e, 0.1em -0.3em 0.9em #196619;
  }
  50% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #32cd32, 0.01em -0.05em 0.15em #2db82d, 0.02em -0.15em 0.2em #28a428, 0.04em -0.20em 0.3em #238f23, 0.05em -0.25em 0.4em #238f23, 0.06em -0.2em 0.9em #1e7b1e, 0.1em -0.1em 1.0em #196619;
  }
  75% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.06em 0.18em #32cd32, 0.05em -0.15em 0.23em #2db82d, 0.05em -0.15em 0.3em #28a428, 0.07em -0.25em 0.4em #238f23, 0.09em -0.3em 0.5em #238f23, 0.1em -0.3em 0.9em #1e7b1e, 0.1em -0.3em 1.0em #196619;
  }
  100% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #32cd32, 0.01em -0.05em 0.15em #2db82d, 0.02em -0.15em 0.2em #28a428, 0.04em -0.20em 0.3em #238f23, 0.05em -0.25em 0.4em #238f23, 0.06em -0.2em 0.9em #1e7b1e, 0.1em -0.1em 1.0em #196619;
  }
}

@media screen and (max-width: 500px) {
.font-effect-toxic-animation {
    -webkit-animation-name: color-change;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction: alternate-reverse;
  }

  @-webkit-keyframes color-change {
    0% {
      color: #32cd32;
    }
    10% {
      color: #2db82d;
    }
    20% {
      color: #28a428;
    }
    30% {
      color: #238f23;
    }
    40% {
      color: #1e7b1e;
    }
    50% {
      color: #196619;
    }
    60% {
      color: #1e7b1e;
    }
    70% {
      color: #238f23;
    }
    80% {
      color: #28a428;
    }
    90% {
      color: #2db82d;
    }
    100% {
      color: #32cd32;
    }
  }
}

<span style="color:#2f4f4f;text-shadow:black 5px 5px 10px; font-size:28px; font-family:Toxic;" class="font-effect-toxic-animation">Blind_Guardian</span>