（JS）ぐにゃぐにゃ動く背景

お疲れ様です。お久しぶりです。

勉強はしていたのですが、なんかコードを書いても、ちらちら見てばかりでちゃんと理解しながら書けていないなーと思い、参考書をちゃんと読み返しておりました。
今日も「1冊ですべて身につく入門講座」様から学んだアニメーションです。

#move {
    background: #0bd;
    border-radius: 50%;
    padding: 30px 30px;
    color: #fff;
    text-align: center;
}

const moving = document.querySelector('#move');

const keyframe = {
    borderRadius: [
    '50% 20% 70% 30%/30% 60% 20% 50%',
    '70% 20% 40% 60%/30% 50% 70% 20%',
    '40% 10% 50% 70%/40% 60% 20% 50%',
    '60% 30% 50% 40%/70% 40% 30% 60%',
],
};

const option = {
    duration: 8000,
    direction: 'alternate',
    iteration: Infinity,
};

moving.animate(keyframe, option);

htmlには h1 タグで適当な見出しのみ書いています。そのidが move です。

まず第一引数（動かす内容）である 定数名keyframe 内で、'左上 右上 右下 左下' の順で好きな値を入れます。
スラッシュで区切っているのは、 横の半径/縦の半径 という内容です。
値を4行書いていますが、2行でも動きましたのでお好きなようにされて大丈夫です

第二引数（アニメの再生時間）では、コードの通りですが、
duration でアニメの再生時間を指定します。あとの direction: 'alternate' はアニメを実行する方向の指定で、ここでは「奇数回で通常再生、偶数回で反対方向に再生」としていますが、指定しなくても、初期値が通常の方向での再生となっているので動作します。
iteration: Infinity でアニメーションを繰り返す回数を指定しています。ここでは duration で指定した時間の間、無限ループするように指定しています。

結果から申し上げますと、ふよふよというかぐにゃぐにゃというか、動きのある背景を作ることができました
画像ですが、以下↓

が、動作結果を掲載する情報を、前回の投稿にてコメントでお教えいただき、今日それを知ったところですので、これは実装できるようになりましたら、改めて結果のところだけ投稿いたします。
qiitaの仕様をよく読めよって話でもありますが、前回コメントくださった方、いつもありがたい情報ありがとうございます

以下、今回つまずいた箇所と反省です。
まず参考書の該当ページを読んで確認し、自分なりにコードを書き、ちゃんと動くかを確認し、ダメだったら参考書に戻って再度確認するという風に取り組みました。

画像は書いている途中のものですが、こういった感じで[]をつけ忘れていたり、
iteration: Infinity の「I」を小文字で書いてしまっていたので動かなかったりと凡ミスが目立ちました…
スペルミスはありませんでしたが、コンマ１つ付け忘れるだけでもエラーになるので、赤い波線を見つけたら何がダメなのかしっかり確認するようにせねば