SafariでwebPは表示するけどcss animationでは？

Adobe PhoshopプラグインのWebPShopを使って次世代フォーマットWebPで保存できるようになったので 、WebPで「css animation」させれば軽くていいのではと思い試してみたのですが、事情により動作具合をGIFにしています。
参照：くり返しサイトの改善をPageSpeedで次世代フォーマットWebPを比較

Chromeが一番スムーズで意図した通りに動きます。
FIrefoxはチラつきがあります。
Safariはご覧の通りですがJPGでは問題ないです。

@keyframes animate{
      0%, 100%{
        background: url('/image.webp') no-repeat top fixed;
      }
      50%{
        background: url('/image.webp') no-repeat bottom fixed;
      }
    }

Safari
Chrome

サンプルを置くページを作るのがサービスを利用していると作りにくい。

関連記事に追記しましたがAnimation対応や透過対応もブラウザバージョンによって違います。

Frequently Asked Questions  |  WebP  |  Google Developers
https://developers.google.com/speed/webp/faq


関連記事