html - CSS 动画不工作(以前工作)

Question

这些动画以前可以工作，但我的 CSS 真的很乱，所以我清理了它，之后它们就停止工作了。 您应该关注的部分是 .pbc 和 .ft 以及摇动和 rightThenLeft 关键帧。

这是我的 CSS: http://pbear.comli.com/main.css

fiddle :https://jsfiddle.net/I3ANNED/g56bgfap/1/

<footer>
<h6 align="right" class="ft"><strong>http://youtube.com/zturbin</strong></p>
</footer>
<div class="pbc"><h5 class="pbct" align="center" style="font-family:Impact;
font-size: 3em; line-height:1.6em;">PB</p></div>

动画在单独使用时有效，但与网站的其他部分一起使用时无效。

最后一个动画在您访问网站 70 秒后开始。

Answer 1

您在 main.css 中的 webkit 彩虹关键帧中缺少右括号。这会导致 CSS 解析错误，使您的动画无法运行。

@-webkit-keyframes rainbow {

  0%{background-position:0% 82%}
  50%{background-position:100% 19% /* <----- Missing closing bracket */
  100%{background-position:0% 82%}

}

更正的 CSS:

@-webkit-keyframes rainbow {

  0%{background-position:0% 82%}
  50%{background-position:100% 19%}
  100%{background-position:0% 82%}

}