背景色をdataの値に合わせたい

Question

実現したいこと

こちらの記事 の後半にある、「グラデーションをアニメーションさせてみよう」の部分がまさにやりたいことです。

ただ、
記事を参考にグラデーションを変化させることはできたのですが、この記事中の

@keyframes gradationTest {
  0% { background-color: #6CB8FF; }
  50% { background-color: #FFF66C; }
  100% { background-color: #FFA36C; }
}

の部分を動的にしたいです。

ランダムな3つの色コードを取得する関数があり、そこで得られた色コードをグラデーションの3色にしてアニメーションさせたいです。
アニメーションなしに単に背景色を指定するだけなら <div :style="hogehoge" /> として動的に設定することはできたんですが、 <style></style> の中にある @keyframes hogehoge の部分を動的に操作する方法がわかりません。

そのような方法はあるのでしょうか？？
また、もし不可能な場合、どのようにするのがいいのか、もしご存知のことがあれば教えていただきたいです。
宜しくお願い致します。

環境

Nuxt.js 2.12.2 で作ったWebアプリです。

Answer 1

@keyframesを直接編集する方法があるかもしれませんが、単純にstyle要素を書き換えてしまえば反映すると思います。

Comments

[hajifu]

回答ありがとうございます！すみません、私がanimationのことをよくわかっていないのですが、@keyframsに書く以外に、:styleの中に、例えばwidthやheightなどと同じようにアニメーションを設定する方法があるのでしょうか？？

[kei344]

<style id="target">/*これを*/</style>
↓
<style id="target">/*HTMLと同じように書き換える*/</style>

こういう回答です。

[hajifu]

ありがとうございます！できました！
思ってもみないやりかたでした…！