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

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

CSSでは、offset-pathプロパティを使用することで、要素にモーションパス（移動経路）を定義できます。このプロパティを活用すると、要素を指定したパスに沿ってアニメーションさせることが可能です。

構文

CSS offset-pathプロパティの基本的な構文は以下のとおりです。

Selector {
    offset-path: /*値*/
}

offset-pathとoffset-distanceの組み合わせ

offset-pathは単独では機能せず、通常offset-distanceプロパティと組み合わせて使用します。offset-distanceは、パスの始点からどの位置まで進んだかをパーセンテージで表します。この値を@keyframesで0%から100%まで変化させることで、要素がパス全体を一周するアニメーションを実現できます。

サンプルコード

以下の例では、SVGパスで円形の軌道を定義し、そのパスに沿って要素を連続的に移動させています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 5%;
    width: 35px;
    height: 35px;
    offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0');
    animation: round 3000ms infinite ease-in-out;
    background: darkseagreen;
    border-radius: 30%;
}
@keyframes round {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
</style>
</head>
<body>
<hr/>
<div></div>
</body>
</html>

コードの解説

  • path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0')：SVGのパスコマンドで円形の軌道を描いています。Aコマンド（楕円弧）を2つ組み合わせることで完全な円を作成しています。
  • animation: round 3000ms infinite ease-in-out;：3秒ごとに繰り返される滑らかなアニメーションを設定しています。
  • @keyframes round：offset-distanceを0%から100%へ変化させることで、要素がパスの始点から終点まで移動します。

実行結果

このコードを実行すると、緑色の要素が円形の軌道に沿ってぐるぐると回転し続けます。

  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アニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進