今回はWeb制作におけるCSSアニメーションの中でオープニングアニメーションに関する内容です。ページアクセス時に画面全体に乗っかったカラーを右斜め上方向と左斜め下方向へ同時にアニメーションさせてからページを表示する方法を紹介します。※PCのみで動く仕様となっているのでご注意ください。スキルコーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。それぞれのdivの:afterにborder-colorとして色を指定。bodyにaddClassでクラスを付与したらtransformで左用と右用のdivを画面外に動かす。【CSS】テキストを一文字ずつ上下から相互にフェードインさせる方法この記事を書いた人(著者情報)片山カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。職業:事業会社でWEBメディアサイトのディレクターをやっています。コーディングも程よくやるタイプのディレクターです。