ここまで動かせる!楽しいcss アニメーションのサンプル集

小気味よいアニメーションを用いたWebサイトを国内でも多く見かけるようになってきました。CSS3により画像編集やFlashが減りメンテナンス性も向上しています。2015年もアニメーションを取り入れるサイトは増えていくでしょう。
今回はCSSアニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
エフェクトサンプル
- 1.アニメのようにテキスト下の画像を移動させる
- 2.映画のように文字や画像に遠近感を出して動かす
- 3.動く斜線プログレスバー
- 4.文字をバウンドさせながら表示する
- 5.文字を一瞬だけ反射させる
- 6.カウントダウン
CSSアニメーションの種類と違い
他のエフェクト
エフェクトサンプル
1.アニメのようにテキスト下の画像を移動させる

アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clip
を使って画像をテキストでくり抜き、アニメーションでbackground-position
の位置を右に移動させます。
<div class="type-mask"> <h2>サンプルテキスト</h2> </div>
.type-mask h2{ -webkit-animation: scrollmask 10s ease 1.5s infinite; -webkit-background-clip: text; background-image: url(img/sample.jpg); color: transparent; font-size: 80px; } @-webkit-keyframes scrollmask { 0% {background-position: 0 0;} 100% {background-position: 100% 0;} }
2.映画のように文字や画像に遠近感を出して動かす

rotateX
によるX軸(横)回転だけだと縦に縮んだようにしか見えませんが、遠近感の指定をするperspective
を使うと、文字や画像のように立体的に見せることができます。perspective
の数値は小さいほど遠近感が強くなります。
<div class="type-pers-parent"> <div class="type-pers-child"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor nisl id est auctor mollis sed non urna. Sed et ornare neque.</p> </div> </div>
.type-pers-parent { perspective: 150px; -webkit-perspective: 150px; height: 200px; background-color: #222; overflow: hidden; } .type-pers-child { text-align: justify; padding: 5%; -webkit-animation: typetext linear 15s infinite; color: #F1C40F; letter-spacing: 1px; } @-webkit-keyframes typetext { 0% {transform: rotateX(45deg) translate(0,0);} 100% {transform: rotateX(45deg) translate(0,-500px);} }
3.動く斜線プログレスバー

linear-gradient
で斜線ストライプを作ったら、background-position
で左右の位置をアニメーションで動かします。
<div class="type-stripe"></div>
.type-stripe { height: 10px; background: linear-gradient(-45deg, #3498DB 25%, #fff 25%, #fff 50%, #3498DB 50%, #3498DB 75%, #fff 75%, #fff); -webkit-animation: stripeBg 10s linear infinite; background-size: 20px 20px; border: 1px solid #3498DB; } @-webkit-keyframes stripeBg { 0% {background-position: 0 0;} 100% {background-position: 100% 0;} }
4.文字をバウンドさせながら表示する

文字や画像をバウンドさせながら揃えます。ロゴに使うなどページが表示された時に1回だけ動かしたい場合はinfinite
を外して以下のように記述します。ボールが跳ねる時に横と縦を一瞬だけ伸縮させたいので、方向転換したタイミングでscale
を付与しています。
<div class="type-textbound"> <span class="textbound1">L</span> <span class="textbound2">O</span> <span class="textbound3">G</span> <span class="textbound4">O</span> </div>
.type-textbound { font-size: 60px; text-align: center; } .textbound1 {-webkit-animation: bound .5s ease-in-out;} .textbound3 {-webkit-animation: bound .7s ease-in-out;} .textbound2 {-webkit-animation: bound .9s ease-in-out;} .textbound4 {-webkit-animation: bound 1s ease-in-out;} @-webkit-keyframes bound { 0% {transform: scale(0) translate(0,-500px);} 50% {transform: scaleX(2) translate(0,200px);} 70% {transform: scaleY(.5) translate(0,-100px);} 90% {transform: scaleX(1.5) translate(0,50px);} 100% {transform: scale(1) translate(0,0);} }
5.文字を一瞬だけ反射させる

transform: rotate
で光の反射を斜めに傾け、色を透過させ文字の上をアニメーションで通過させます。擬似要素である:beforeにアニメーションを組み込んでます。
<div class="type-shine">SAMPLE</div>
.type-shine { font-size: 60px; position: relative; overflow: hidden; } .type-shine:before { -webkit-animation: shine .6s ease 1.5s; content:""; position: absolute; top: 0; left: -250px; width: 100%; height: 100%; transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0); } @-webkit-keyframes shine { 0% {transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);background: rgba(255,255,255,0.5);} 100% {transform: rotate3d(0,0,1,-25deg) translate3d(0,150%,0);background: rgba(255,255,255,0.5);} }
6.カウントダウン

before要素を付けcontentプロパティでカウンタ名content: counter(number);
を指定することで連番を入れます。その後nth-child()
とアニメーションanimation-delay
を使って遅延させる順序を指定し数字を表示させます。
<div class="type-countdown"> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> <div class="type-countdown-list"></div> </div>
.type-countdown { position: relative; height: 100px; width: 100% } .type-countdown-list { counter-increment: number ; position: absolute; -webkit-animation: countdown 1s; margin: auto 0; width: 100%; opacity:0; font-size: 60px; text-align: center; } .type-countdown-list:before { content: counter(number); } .type-countdown-list:nth-child(9) { -webkit-animation-delay: 1s;} .type-countdown-list:nth-child(8) { -webkit-animation-delay: 2s;} .type-countdown-list:nth-child(7) { -webkit-animation-delay: 3s;} .type-countdown-list:nth-child(6) { -webkit-animation-delay: 4s;} .type-countdown-list:nth-child(5) { -webkit-animation-delay: 5s;} .type-countdown-list:nth-child(4) { -webkit-animation-delay: 6s;} .type-countdown-list:nth-child(3) { -webkit-animation-delay: 7s;} .type-countdown-list:nth-child(2) { -webkit-animation-delay: 8s;} .type-countdown-list:nth-child(1) { -webkit-animation-delay: 9s;} @-webkit-keyframes countdown { 50% {opacity:1;} 100% {opacity:0;} }
上記のカウントダウンについては以下の書籍に詳しい内容が掲載されています。
CSSアニメーションの種類と違い
7.アニメーション
CSSアニメーションの種類と違いを簡易的ながら書いておきます。
animation | ループ有り | ページ表示後 即可動 |
transform | ループ無し | 変形(移動・拡大・回転・傾斜・遠近)が可能 |
transition | ループ無し | 滑らかに変化させる(移動時間を調整) |
8.transform(変形)の種類
transformプロパティは要素に変形効果を付与します。効果を連結する場合は半角スペースで区切って複数の効果を適用させることが可能です。逆回りや縮小する場合は数値を-(マイナス)にします。
transform の種類1
translate | 移動 | transform: translate(20px,20px) | (右、下)に20px移動 |
rotate | 回転 | transform: rotate(45deg) | (45度)時計回りに回転 |
skew | 傾斜 | skew(0,170deg) | (横、縦)に傾斜 |
scale | 縮尺 | transform: scale(1.2) | (横、縦)に拡大 |
perspective | 遠近 | transform: perspective(200) | 数値が小さいほど遠近感が強くなる |
transform の種類2
transform-origin | 基点 | transform-origin: 100% 100%; | 左上からの位置 |
transform-style | 描写 | transform-style:flat; transform-style:preserve-3d; |
子要素を平らに表示するか 子要素を立体に表示するか |
backface-visibility | 裏面 | backface-visibility: visible; backface-visibility: hidden; |
裏面の表示/非表示 |
他のエフェクト
比較的最近のもので気になったもの、面白いエフェクトを海外サイトからご紹介します。
9.左右に広がるプリローダー

擬似要素にアニメーションで指定しbackground-color
の色と幅を変化させています。
10.文字を遅延させ表示

こちらは、文字を順番に遅らせて消しているエフェクト。それぞれの文字にクラスを付けアニメーションの開始を遅らせるanimation-delay
を指定し遅延、全体にtransform: scale
で伸縮させるエフェクトを付与しています。
11.動くテキストリンク

テキストリンクをホバーした際に発生する様々なエフェクト。3D回転・注釈表示・スライド・波紋など沢山の種類のサンプルが掲載されています。
12.オープニングを連想させるテキスト

映画などのオープニングを連想させるブラーが解除されていくかのような効果。こちらもanimation-delay
で文字ごと遅延、rotateY
で縦軸に傾けたり、動きを組み合わせて表現しています。
13.モーダルウィンドウ2つ

jsを使わずに、クリックでの制御を行うパターン2つ。一つ目はボタンをクリックでポップアップ、2つ目はクリックで全体にオーバーレイ。
14.アウトラインを使ったボタンエフェクト

ボタンにマウスオーバーする際の、少しひねりのあるエフェクト一覧。使いどころは難しいですが傾斜や円の伸縮などアイデアとしては面白いです。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
[…] ここまで動かせる!楽しいcss アニメーションのサンプル集 […]