AR.jsとA-frameを使ったWebARで、GIFアニメーションを表示させたい

##WEBARで透過GIFアニメを表示させたい

AR.js+A-frameのWEBARで透過GIFを表示させたいのですが、表示させると重なった状態で見えてしまいます。
A-frameのバージョンを0.9.0にしても改善されませんでした。何が原因なのでしょうか。

ソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- A-Frame ライブラリの読み込み※GIFはV0.9.0で動く -->
  <script src='https://aframe.io/releases/0.9.0/aframe.min.js'></script>
<!-- AR.js ライブラリの読み込み -->
<script src='https://raw.githack.com/jeromeetienne/AR.js/2.0.8/aframe/build/aframe-ar.js'></script>
<!-- shaderライブラリ -->
<script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
<script src="shader-grid-glitch.js"></script>

<link rel="stylesheet" href="style.css">
<title>YPCの簡単AR</title>
</head>
  
<body>
  <div class="arjs-loader">
    <p>gifアニメテスト00</p>
  </div>
 
<!-- デバッグ用の画面表示、VR用のボタンをそれぞれ非表示に -->
<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
        <!-- Assetの用意　 -->
        <a-assets>
            <img id="kaeru" src="kero.gif">
        </a-assets>

<!-- 『.patt』ファイルを読み込む -->
　<a-marker preset="custom" type="pattern" url="pattern-testmarker.patt" >
   <a-entity
              geometry="primitive: plane;"
              material="shader:gif; src:#kaeru;
              color:white;
              opacity:1"
              rotation="-90 0 0">
   </a-entity>
</a-marker>
    <a-entity camera></a-entity>
  </a-scene>
  <script>

    </body>
</html>