0Pricing
CSS Academy · レッスン

clip-path図形のアニメーション

clip-pathのpolygon値間をトランジションさせ、印象的な表示アニメーションを作成します。

「clip-path図形のアニメーション」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

アニメーション可能な clip-path

2つのclip-path値が同じシェイプ関数で、引数の数も同じであれば、CSSではそれらの間をトランジションおよびアニメーションできます。補間は点ごとに行われます。

スライド表示アニメーション

左からコンテンツがスライドインする、典型的なclip-pathによる表示です。

<div class="content visible"></div>

円形の表示

中央から円を拡大してコンテンツを表示します。

<div class="overlay open"></div>

シェイプモーフィング

多角形のシェイプ間をアニメーションさせて、モーフィング効果を作成します。両方の多角形の頂点数は同じでなければなりません。

<div class="morph-shape"></div>

頂点数を一致させる

異なる多角形のシェイプ間（例：三角形から四角形）をアニメーションさせるには、単純なシェイプに重なる追加の点を加えます。

<div class="triangle-4pt"></div>
<div class="square-4pt"></div>

ホバー時の表示効果

ホバー時にカード画像を円形にクリップします。

<div class="card">
  <div class="card-img"></div>
</div>

ワイプトランジション

ページ切り替え用の斜め方向のワイプトランジションです。

<div class="page-enter"></div>

clip-pathアニメーションのパフォーマンス

アニメーションするclip-pathは、ほとんどのブラウザーでペイント段階を発生させます（コンポジットのみで処理されるtransformやopacityとは異なります）。大きな要素に複雑なアニメーションを適用する場合は、公開前にDevToolsでパフォーマンスをテストしてください。

アニメーションにおける clip-path と mask-image の比較

複雑な透過アニメーションでは、単純な方向性の表示に限れば、アニメーションするグラデーションを使ったmask-imageのほうがclip-pathより高いパフォーマンスを得られる場合があります。

clip-pathでのスプリングイージング

スプリングのようなイージングによって、自然な印象の表示を作成できます。

<div class="reveal"></div>

確認問題

2つのpolygon() clip-path値の間をCSSで滑らかに補間するには、何が必要ですか。

まとめ

トランジションまたは@keyframesを使用して、clip-pathのシェイプ間をアニメーションさせます。補間には、同じシェイプ関数と同じ頂点数が必要です。拡大表示にはcircle()、ワイプやモーフィングにはpolygon()、長方形のクリップトランジションにはinset()を使用します。単純なシェイプに重なる点を追加して、頂点数を一致させます。

よくある質問

「clip-path図形のアニメーション」レッスンは無料ですか？

はい。「clip-path図形のアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「clip-path図形のアニメーション」で何を学びますか？

clip-pathのpolygon値間をトランジションさせ、印象的な表示アニメーションを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「clip-path図形のアニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. polygon()とcircle()によるclip-path
  2. テキストの回り込みのためのshape-outside
  3. clip-path図形のアニメーション
  4. CSSマスクとClip-pathの比較
← CSS Academyに戻る