小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニメーションを取り入れるサイトは増えていくでしょう。今回はCSSアニメーションを使って、面白い動きができるコードをご紹介します。したソースで申し訳ないです、微調整はお願いします。他のエフェクト9.左右に広がるプリローダー10.文字を遅延させ表示11.動くテキストリンク12.オープニングを連想させるテキスト13.モーダルウィンドウ2つ14.アウトラインを使ったボタンエフェクトエフェクトサンプル1.アニメのようにテキスト下の画像を移動させるアニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。0;}}2.映画のように文字や画像に遠近感を出して動かすrotateXによるX軸(横)回転だけだと縦に縮んだようにしか見えませんが、遠近感の指定をするperspectiveを使うと、文字や画像のように立体的に見せることができます。perspectiveの数値は小さいほど遠近感が強くなります。translate(0,-500px);}}3.動く斜線プログレスバーlinear-gradientで斜線ストライプを作ったら、background-positionで左右の位置をアニメーションで動かします。CSS3のみで斜線ボーダーの背景装飾を実装してみる4.文字をバウンドさせながら表示する文字や画像をバウンドさせながら揃えます。ロゴに使うなどページが表示された時に1回だけ動かしたい場合はinfiniteを外して以下のように記述します。ボールが跳ねる時に横と縦を一瞬だけ伸縮させたいので、方向転換したタイミングでscaleを付与しています。rotateで光の反射を斜めに傾け、色を透過させ文字の上をアニメーションで通過させます。擬似要素である:beforeにアニメーションを組み込んでます。counter(number);を指定することで連番を入れます。その後nth-child()とアニメーションanimation-delayを使って遅延させる順序を指定し数字を表示させます。{opacity:0;}}上記のカウントダウンについては以下の書籍に詳しい内容が掲載されています。CSSアニメーションの種類と違い7.アニメーションCSSアニメーションの種類と違いを簡易的ながら書いておきます。滑らかに変化させる(移動時間を調整)8.transform(変形)の種類transformプロパティは要素に変形効果を付与します。効果を連結する場合は半角スペースで区切って複数の効果を適用させることが可能です。逆回りや縮小する場合は数値を-(マイナス)にします。他のエフェクト比較的最近のもので気になったもの、面白いエフェクトを海外サイトからご紹介します。擬似要素にアニメーションで指定しbackground-colorの色と幅を変化させています。Preloader10.文字を遅延させ表示こちらは、文字を順番に遅らせて消しているエフェクト。scaleで伸縮させるエフェクトを付与しています。Gloude11.動くテキストリンクテキストリンクをホバーした際に発生する様々なエフェクト。3D回転・注釈表示・スライド・波紋など沢山の種類のサンプルが掲載されています。Effects12.オープニングを連想させるテキスト映画などのオープニングを連想させるブラーが解除されていくかのような効果。こちらもanimation-delayで文字ごと遅延、rotateYで縦軸に傾けたり、動きを組み合わせて表現しています。Animations13.モーダルウィンドウ2つjsを使わずに、クリックでの制御を行うパターン2つ。一つ目はボタンをクリックでポップアップ、2つ目はクリックで全体にオーバーレイ。window14.アウトラインを使ったボタンエフェクトボタンにマウスオーバーする際の、少しひねりのあるエフェクト一覧。使いどころは難しいですが傾斜や円の伸縮などアイデアとしては面白いです。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2017/08/28CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダーCSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。作成したデモはこちら。Win/Mac対応Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。gulpを何に2015/11/16プログラミングやコーディングを学習したい人に役立つツール初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使2016/09/12スクロールした時に面白いエフェクトを出すためのアイデアまとめスクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。コメントデータの処理方法の詳細はこちらをご覧ください。