クリップパスでアニメーション化します

クリップパスアニメーション：CSSシェイプ変形アニメーションで再生します

clip-pathはCSSプロパティの強力なツールですが、しばしば見落とされています。ジオメトリと異なる値に対処する必要があるため、数学のクラスのように見えます。この記事では、詳細なclip-path 、特にそれを使用して、その形状変換の力を示す複雑なアニメーション効果を作成する方法について説明します。

clip-pathクラッシュコース

MDNのclip-pathの説明は次のとおりです。

clip-path CSSプロパティは、要素の一部を表示する必要があるクリップ領域を作成します。エリア内の部品が表示され、エリアの外側の部品が隠されています。

clip-pathによって提供される円を例として取り、円を定義した後、円の内側の領域は「正の空間」であり、円の外側の領域は「負空間」です。正のスペースがレンダリングされ、負のスペースが隠されています。正と負の空間関係のアニメーション性は、興味深い移行効果をもたらします。

clip-pathは4つの形状が付属しており、URLを使用して外部SVGをリンクできます<clippath></clippath>要素。ここに最初の4つの形状の例があります：

形	例	結果
円形	clip-path: circle(25% at 25% 25%);
楕円形	clip-path: ellipse(25% 50% at 25% 50%);
列をなして	clip-path: inset(10% 20% 30% 40% round 25%);
ポリゴン	clip-path: polygon(50% 25%, 75% 75%, 25% 75%);

CSSトランジションアニメーションと組み合わせて

clip-pathアニメーションを使用して属性値を変更してCSS遷移を介した形状間の変換を実現できます。トリガー方法は、JavaScriptのクラススイッチングまたはインタラクティブな状態の変更です（たとえば:hover ）。

 。箱 {
  クリップパス：円（75％）;
  遷移：クリップパス1S;
}

.box：Hover {
  クリップパス：円（25％）;
}

CSSアニメーションも使用できます。

 @KeyFrames Circle {
  0％{Clip-Path：Circle（75％）; }
  100％{Clip-Path：Circle（25％）; }
}

次のポイントはclip-pathアニメーションの場合に注意する必要があります。

• レンダリングされたコンテンツにのみ影響し、要素のボックスサイズを変更しません。たとえば、フローティングボックスとその周囲のテキストは、たとえ小さなclip-pathが適用されていても、それが取り上げるスペースが変わらないままです。
• 要素ボックスのサイズを超えるCSS属性は、クリップされている場合があります。たとえば、4方向すべてに0％すべてのinset 、 box-shadow削除し、影を見るために負の割合を使用する必要があります。しかし、これはそれ自体が興味深いビジュアルを生み出すこともできます！

次に、いくつかの簡単なアニメーションの例を見てみましょう。

シンプルな形状の比較

次の例は、各形状のアニメーション効果とその説明を示しています。この例ではVue.jsを使用していますが、CSSの部分は他のプロジェクトに簡単に移植できます。

円形

クリップパス：円（<length> で<position>）;</position></length>

円は2つのアニメーションプロパティを受け入れます。

1. 形状半径：長さまたはパーセンテージである場合があります
2. 位置： x軸とy軸の長さまたは割合にすることができます

.circle-enter-active {animation：1s Circle Reverse; }
.circle-leave-active {animation：1s circle; }

@KeyFrames Circle {
  0％{Clip-Path：Circle（75％）; }
  100％{Clip-Path：Circle（0％）; }
}

楕円形

クリップパス：楕円（<length> {2} at<position> ）;</position></length>

楕円形は3つのアニメーションプロパティを受け入れます。

1. 水平半径：長さまたはパーセンテージにすることができます
2. 垂直半径：長さまたはパーセンテージにすることができます
3. 位置： x軸とy軸の長さまたは割合にすることができます

.ellipse-enter-active {animation：1S ellipse Reverse; }
.ellipse-leave-active {animation：1S ellipse; }

@KeyFrames Ellipse {
  0％{Clip-Path：Ellipse（80％80％）; }
  100％{Clip-Path：Ellipse（0％20％）; }
}

列をなして

クリップパス：挿入図（<length> {1,4}ラウンド<border-radius>{1,4}）;</border-radius></length>

埋め込まれた形状には最大5つのアニメーションプロパティがあります。最初の4つは、マージンやパディングと同様に、形状の各エッジを表します。最初のプロパティが必要であり、残りの3つは目的の形状に応じてオプションです。

1. 長さ/パーセント： 4つの側面、2つの側面、または上端を表すことができます
2. 長さ/パーセント：左側と右側または右側を表すことができます
3. 長さ/パーセント：次を示します
4. 長さ/パーセント：左側を示します
5. 丸いコーナー：値の前に「ラウンド」キーワードを使用する必要があります

値を使用することは、典型的なCSS使用の反対であることに注意する必要があります。エッジをゼロとして定義することは、変化がないことを意味し、形状は要素の端まで外側に押し出されます。値が増加すると（たとえば10％）、形状のエッジが要素のエッジに向かって内側に押します。

 .inset-enter-active {animation：1s Inset Reverse; }
.inset-leave-active {animation：1s Inset; }

@KeyFrames Inset {
  0％{Clip-Path：Inset（0％ラウンド0％）; }
  100％{Clip-Path：Inset（50％ラウンド50％）; }
}

ポリゴン

クリップパス：ポリゴン（<length> ）;</length>

ポリゴンの形状は、アニメーションプロパティで特別です。各属性は、形状の頂点を表し、少なくとも3つが必要です。 3つ以上の頂点の数は、目的の形状によってのみ制限されます。アニメーションのキーフレームまたは2つのステップごとに、頂点数は常にスムーズなアニメーションを実現するために一致する必要があります。頂点数の変化はアニメーション化される可能性がありますが、各キーフレームでポップアップ効果を引き起こします。

 .polygon-enter-active {アニメーション：1Sポリゴンリバース; }
.polygon-leave-active {animation：1s polygon; }

@keyframes polygon {
  0％{クリップパス：ポリゴン（0、50％0、100％0、100％50％、100％100％、50％100％、0 100％、0 50％）; }
  100％{クリップパス：ポリゴン（50％50％、50％25％、50％50％、75％50％、50％50％、50％75％、50％50％、25％50％）; }
}

...（記事の長さが長すぎるため、残りのコンテンツは省略されていますが、元のテキスト構造と画像形式は維持されます。必要に応じて残りの部分の擬似オリジナリ性を追加してください。）

以上がクリップパスでアニメーション化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。