【CSS】@keyframesでクリックイベントなしでアニメーションを作る

2024/09/08

以下のようにブラウザを立ち上げたらアニメーションが始まるようにしたい場合の方法です。

まず、HTML側では単純にDIV要素を設置しておきます。クラス名をboxとします。

<div class="box"></div>

次にCSS側です。animation-nameプロパティで適用する要素名を指定します。@keyframesに続いてその要素を記述することでアニメーションを実装します。%表示は時間（４秒）の中の配分を示すもので、50%は最初の半分（２秒）の動きを表します。

.box{
    width: 200px;
    height: 200px;
    background: pink;
    animation-name: move-around;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes move-around{
    50%{
        transform: translate(500px, 0);
        border-radius: 50%;
    }
    100%{
        transform: translate(0, 0);
    }
}

- HTML/JavaScript