今回はWeb制作におけるCSSアニメーションの中でカーテンアニメーションに関する内容です。画像の上に重ねたカラーを右上から左下へ斜線を引くように斜めスライドさせてから画像を表示するカーテンアニメーションをご紹介します。スキルコーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。divのafterへ斜めにスライドさせる背景色をセット。色は画像があるセクションの背景色を指定。block;でブロック要素へ。skew(30deg)で台形のように要素を傾斜変形させること。transitionでアニメーションをつけて、topとleftの位置が変わるので斜めに動いているように見える。【CSS】テキストの下線(アンダーライン)を横方向に一周走らせるアニメーションを実装する方法この記事を書いた人(著者情報)片山カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。職業:事業会社でWEBメディアサイトのディレクターをやっています。コーディングも程よくやるタイプのディレクターです。