丸ワイプから全体表示するアニメーション

丸ワイプのサイズを徐々に大きくしながら全体表示するアニメーション。

デモページを表示

CSS

補足

• circleWipeクラスの疑似要素で、CSSの放射グラデーションを表示している。
• 放射グラデーションの中心部を透過、その外側を白のグラデーションに指定。徐々に透過部分の直径を大きくして、全体表示されるようアニメーションを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• circleWipeクラスをつけたブロック要素の中がアニメーション表示される。