CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSアニメーションで要素を円形の軌道上に移動させる方法

CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。

本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。

円形移動の仕組み

ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。

  • rotate()：要素を回転させ、移動する向きを決める
  • translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る
  • rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ

アニメーションの進行に合わせて回転角度を0度から360度まで変化させると、要素は中心点の周りを一周します。最後に逆回転を加えないと、要素そのものも一緒に回転してしまうため注意しましょう。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 8%;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: red;
    animation: move 3s infinite linear;
}
@keyframes move {
    0% {
        transform: rotate(0deg) translateX(40px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(40px) rotate(-360deg);
    }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

実行結果

このコードをブラウザで開くと、赤い四角形が3秒かけて円形の軌道を等速で一周し続けるアニメーションが表示されます。infiniteが指定されているため、アニメーションは無限に繰り返されます。

CSSアニメーションで要素を円形の軌道上に移動させる方法

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSS offset-path（モーションパス）を使って要素を円形パス上に移動させる方法

    CSSでは、offset-pathプロパティを使用することで、要素にモーションパス（移動経路）を定義できます。このプロパティを活用すると、要素を指定したパスに沿ってアニメーションさせることが可能です。構文CSS offset-pathプロパティの基本的な構文は以下のとおりです。Selector { offset-path: /*値*/ }offset-pathとoffset-distanceの組み合わせoffset-pathは単独では機能せず、通常offset-distanceプロパティと組み合わせて使用します。offset-distanceは、パスの始点からどの位置まで進んだかをパー