javascriptでアニメーション実装ができない

Open Q&A
1

サイト内の応募ボタンにアニメーションを実装してABテストしたいと考えております。
テンプレートのjsでbackground-color変更をカスタマイズして下記のように実装したのですが、サイトで確認ボタンで見てみたところ、反映されていない状況です。検証ツールでログを見てもなにもエラーは出てないです。
console.logでelementやanimateObjectなどは出力されました。アニメーションを実装する際にkarte側の制約があるのでしょうか？お手数ですが、ご確認いただきたいです。

var element = document.querySelector(".apply-button");
var animateObject = element.animate(
    [
        { transform: 'translateY(0px)', offset: 0},
        { transform: 'translateY(-10px)', offset: 1}
    ], {
    iterations: Infinity,
    delay: 3,
    direction: 'alternate',
    easing: 'ease'
    }
);
animateObject.play();
2

animate Methodですが、jQueryではなくWeb Animation APIを利用されている認識ですがただしいでしょうか？

まだ草案で割とブラウザ対応状況が厳し目なので、これが原因ではないかと思っておりますが・・ いかがでしょうか
すくなくともKARTEで、制限をかけているといったことはないようです。

3

Web Animation APIを使用していますが、jqueryであれば実装できるということでしょうか？

4

どういったことを実装したいかによりますが、動作はするかと存じます。

前提として、「KARTEの」というよりは「ブラウザの」仕様になりますので、色々試していただく必要がありますが、
個人的には、Javascriptで実装するより、CSSで実装するほうがよりスムースで負荷も低い気がしております。

ご検討ください！

5

ご回答ありがとうございます。
すみません、背景を説明していなかったのですが、
テンプレのhtmlの埋め込みでボタンを置き換えしてcssをカスタマイズしてアニメーションを反映させることはできたのですが、ボタンを押してもイベントが発火しないのでイベント発火が必要なボタンをアニメーション実装するには既存のhtml要素をJSでDOM操作する必要があると思いjavascriptで実装しようと試みました。
htmlの埋め込みを使わずに既存htmlのcssカスタマイズできる方法がございましたらご教授いただきたいです

6

なるほど承知しました。

HTML埋め込みでも、Aタグでhrefが設定されていればクリックイベントはおきるはずです。
また、埋め込みでしたら、カスタムイベントを発生させるためにwidget.methodも利用することができます。

こちらのほうがおすすめかも知れません。（上記でしたらCSSでアニメーションもシンプルに実装できるかと思いました）

HTML埋め込みを使わずに、ということでしたら、先も申しましたように完全にKARTEの外側の話になっていまいますが・・
Element.animeteよりも、jQueryのanimate関数のほうが対応ブラウザが広そうなので、動作する可能性はより高いかと思います