WEBサイトを彩るアニメーション！動く円や形が変わるアニメの作成方法

今回は、2種類のシンプルなアニメーションを作成する方法を紹介します。
1つは水平と垂直のライン上で円が動くアニメーション、もう1つは形を変えるアニメーションです。どちらもCSSのみで簡単に実装できます。初心者の方でも理解しやすいように、一つ一つのステップを説明していきます。

動く円アニメーション
1. HTMLコード
2. CSSコード
形を変えるアニメーション
1. HTMLコード
2. CSSコード
まとめ

動く円アニメーション

See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

まずは、水平と垂直のライン上で円が動くアニメーションから始めましょう。

HTMLコード

このコードでは、2つのセクション（水平ラインと垂直ライン）を作成し、それぞれに動く円を配置しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="line">
            <div class="circle"></div>
        </div>
        <div class="vertical-line">
            <div class="moving-circle"></div>
        </div>
    </div>
</body>
</html>

CSSコード

このコードで、ページ全体のレイアウトとアニメーションのスタイルを設定します。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    gap: 50px; /* 横に間隔を開ける */
}

/*以下 横のアニメーション*/
.line {
    position: relative;
    width: 30px;
    height: 1px;
    background-color: black;
}

.circle {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    top: -2.5px; /* 円をラインの中央に配置 */
    animation: move 2s linear infinite;
}

@keyframes move {
    0% {
        left: -6px;
    }
    50% {
        left: 24px; /* ラインの幅 - 円の幅 */
    }
    100% {
        left: -6px;
    }
}

/*以下 縦のアニメーション*/
.vertical-line {
    position: relative;
    width: 1px;
    height: 30px;
    background-color: black;
}

.moving-circle {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    left: -3px; /* 円をラインの中央に配置 */
    animation: moveUpDown 2s linear infinite;
}

@keyframes moveUpDown {
    0% {
        top: -6px; /* 円の半径分、ラインの上端より外 */
    }
    50% {
        top: 24px; /* ラインの高さ - 円の高さ */
    }
    100% {
        top: -6px; /* 円の半径分、ラインの上端より外 */
    }
}

横のアニメーション（keyframes）

0% { left: -6px; }: アニメーションの開始時に円をラインの左外側に配置します。
50% { left: 24px; }: アニメーションの中間時に円をラインの右端に配置します。
100% { left: -6px; }: アニメーションの終了時に円を再びラインの左外側に戻します。

縦のアニメーション（keyframes）

0% { top: -6px; }: アニメーションの開始時に円をラインの上外側に配置します。
50% { top: 24px; }: アニメーションの中間時に円をラインの下端に配置します。
100% { top: -6px; }: アニメーションの終了時に円を再びラインの上外側に戻します。

形を変えるアニメーション

See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

形を変えるアニメーションを紹介します。このアニメーションでは、円がさまざまな形に変わりながら動きます。

HTMLコード

このコードでは、アニメーションの対象となる形を作成しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shape Transformation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="animated-shape"></div>
</body>
</html>

CSSコード

このコードで、形の大きさ、色、ブラー効果、そしてアニメーションのスタイルを設定します。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.animated-shape {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    border-radius: 50%;
    animation: transformShape 20s infinite;
    filter: blur(20px); /* ブラー効果強化 */
}

@keyframes transformShape {
    0% {
        border-radius: 50%; /* 初期状態は円 */
        transform: scale(1);
    }
    25% {
        border-radius: 0%; /* 長方形 */
        transform: scale(1, 2);
    }
    50% {
        border-radius: 0%; /* 台形に見えるようにスケール変更 */
        transform: perspective(200px) rotateX(10deg);
    }
    75% {
        border-radius: 50%; /* 楕円 */
        transform: scale(2, 1);
    }
    100% {
        border-radius: 50%; /* 再び円 */
        transform: scale(1);
    }
}

アニメーション

0% { border-radius: 50%; transform: scale(1); }: アニメーションの開始時に円形の状態からスタートします。
25% { border-radius: 0%; transform: scale(1, 2); }: 25%の位置で長方形に変形します。
50% { border-radius: 0%; transform: perspective(200px) rotateX(10deg); }: 50%の位置で台形のように見えるように変形します。
75% { border-radius: 50%; transform: scale(2, 1); }: 75%の位置で楕円形に変形します。
100% { border-radius: 50%; transform: scale(1); }: 最後に再び円形に戻ります。