CSSアニメーションが機能していません（以前は正常に動作しました）

Question

これらのアニメーションは以前は動作していましたが、私のCSSは面倒だったので、私はそれをきれいにしました。 あなたが見なければならない部分は、.pbcと.ft、そしてshakeとrightThenLeftのキーフレームです。

は、ここに私のCSSです： http://pbear.comli.com/main.css

フィドル：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のウェブキット用の虹のキーフレームに閉じ括弧がありません。このため、アニメーションの実行を妨げている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%} 

}