CSS3は様々な可能性への扉を開いてくれました。今日はCSS3アニメーションを使い、スプラッシュとComing Soon（準備中）ページ効果の作り方をご紹介したいと思います。まるでシンプルな要素に命を吹き込んだかのように自由に動かす方法と、アニメーションシーケンスを実現していますのでお楽しみに。
１つ目のデモで使用しているかわいらしい靴の画像は、これまたかわいらしいAmira Almajidさんによるもので、画像のセットはこちらからご利用いただけます。
※尚、アニメーションをサポートしているブラウザでのみ動作しますので、ご注意くださいね。
チュートリアルがあんまりにも長くなり過ぎないように、ベンダープレフィックスは省略していますので、こちらも併せてご了承くださいね。
それでは早速参りましょうか！
この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
Demo 1
こちらのデモでは画像読込みの時間を確保する為に、アニメーション開始までにかなりのゆとりを持たせています。
１つ目のデモではアニメーション化させる要素が幾つかあります。今回のテーマは「Coming Soon（準備中）」です。
まずコンテンツ部分にメインとなるコンテナ（クラス：sp-container）を用意し、その中にサムネイル用の束をそれぞれ記述しています。それからメインのヘッドライン用の束も用意します。メインコンテンツエリアが表示された後に、E-mailアドレス入力枠をスライドインさせています。
HTMLマークアップ
<div class="sp-container"> <div class="sp-content"> <div class="sp-row"> <span><img src="images/example1/1.png" /></span> <span><img src="images/example1/2.png" /></span> <span><img src="images/example1/3.png" /></span> <span><img src="images/example1/4.png" /></span> <span><img src="images/example1/5.png" /></span> </div> <div class="sp-row sp-side-row"> <span><img src="images/example1/11.png" /></span> <span><img src="images/example1/12.png" /></span> </div> <div class="sp-row sp-content-row"> <h1>Coming Soon</h1> <h2>Designer Shoes that you dream of for incredible prices</h2> <h1 class="sp-title"><em>Little</em> Blue Shoe</h1> </div> <div class="sp-row sp-side-row"> <span><img src="images/example1/13.png" /></span> <span><img src="images/example1/14.png" /></span> </div> <div class="sp-row"> <span><img src="images/example1/6.png" /></span> <span><img src="images/example1/7.png" /></span> <span><img src="images/example1/8.png" /></span> <span><img src="images/example1/9.png" /></span> <span><img src="images/example1/10.png" /></span> </div> <div class="sp-arrow"></div> </div> <div class="sp-side"> <h2>Be the first to know:</h2> <div class="sp-input"> <input type="text" value="Your email"/> <a href="index.html">Go</a> </div> </div> </div>
では、次はCSSのスタイリングを見てみましょう！
CSSスタイリング
１つ目のデモの主な目的は、以下のようなアニメーションの連続を実現させることです。
- fromBackを使ってサムネイル出現
- fromBackを使って１つ目のH1タグの出現
- fromBackを使ってサブヘッドラインのH2タグ出現
- fadeOutを使って１つ目のH1タグとサブのH2タグの消滅
- fadeOutを使ってサムネイルが順番に消え始め、fadeInColorで２つ目のH1タグを表示
それからsizeDownMoveを使ってコンテンツを左に移動と縮小 - slideInを使って矢印とサイドコンテンツをスライド
それではメインのコンテナをセンタリングして、コンテンツはabsoluteで絶対配置しましょう。
.sp-container {
position: relative;
width: 1000px;
height: 600px;
margin: -40px auto 0 auto;
}
.sp-content {
position: absolute;
z-index: 100;
width: 800px;
height: 600px;
left: 0px;
top: 0px;
animation: sizeDownMove 0.9s ease-in-out 6s backwards;
transform: scale(0.6);
transform-origin: 0% 50%;
}
ご覧いただいて分かるように、６秒後にコンテンツへ「動き」と「拡大」のアニメーションを適用させています。この辺のアニメーションはまた後で見ていくことにします。
矢印用のsp-arrowクラスには矢印を背景画像として設定し、absoluteで絶対配置しています。
.sp-arrow {
background: transparent url(../images/arrow.png) no-repeat top left;
position: absolute;
top: 50%;
margin-top: -77px;
left: 82%;
width: 198px;
height: 155px;
animation: slideIn 0.6s ease-in-out 6s backwards;
z-index: 100;
}
サイドコンテンツのsp-sideクラスにはE-mailアドレス入力枠が含まれており、画面右側に配置されるよう設定します。
.sp-side {
width: 460px;
height: 300px;
position: absolute;
right: 10px;
top: 25%;
animation: slideIn 0.6s ease-in-out 6s backwards;
}
この矢印とサイドコンテンツはいずれもしばらく経ってからスライドインしてきます。
では次にヘッドラインのスタイリングに移りましょう。
.sp-side h2 {
font-size: 70px;
padding: 20px 0px;
text-align: center;
color: #fff;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-family: 'Unlock', Arial, sans-serif;
}
それから入力枠とボタン用のラッピング部分ですね。
.sp-input {
background-color: rgba(255,255,255,0.3);
height: 30px;
padding: 20px;
border-radius: 10px;
margin: 0 auto;
width: 260px;
}
.sp-input input[type="text"] {
width: 210px;
padding: 6px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
font-family: 'Cookie', serif;
font-size: 18px;
}
.sp-input input[type="text"]:focus {
outline-color: #acdacf;
}
.sp-input a {
float: left;
background-color: #418e7b;
color: #fff;
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
margin-left: 5px;
text-align: center;
line-height: 30px;
cursor: pointer;
font-family: 'Unlock', Arial, sans-serif;
}
.sp-input a:hover {
background-color: #fff;
color: #418e7b;
}
ではここで、メインコンテンツの内部を見てみましょう。まずヘッドラインのスタイリングですが、こちらは背部から現れてきて、しばらくするとフェードアウトするように設定します。
.sp-content h1:first-child {
font-size: 100px;
text-align: center;
color: #fff;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
line-height: 80px;
padding: 30px 0px 20px 0px;
font-family: 'Unlock', Arial, sans-serif;
animation:
fromBack 1.2s ease-in-out 1.5s backwards,
fadeOut 0.5s linear 4.5s forwards;
}
２つ目のヘッドラインは、１つ目のヘッドラインが消えた後にただフェードインしてくるだけです。
.sp-content h1.sp-title {
font-size: 90px;
line-height: 80px;
position: absolute;
top: 50px;
left: 160px;
width: 470px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
padding-top: 155px;
height: 305px;
text-transform: uppercase;
text-align: center;
color: #518f7e;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
font-family: 'Unlock', Arial, sans-serif;
animation: fadeInColor 1.2s linear 5.2s backwards;
}
.sp-content h1:last-child em {
font-family: 'Cookie', serif;
text-transform: none;
}
サブヘッドラインは１つ目のH1タグ同様現れては消えるようにします。
.sp-content h2 {
font-size: 36px;
text-align: center;
color: #518f7e;
font-family: 'Cookie', serif;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
opacity: 0;
animation:
fromBack 0.6s ease-in-out 2.6s backwards,
fadeOut 0.5s linear 4.5s backwards;
}
お次はサムネイルを格納している束の設定です。
.sp-content-row {
width: 466px;
height: 300px;
float: left;
}
.sp-side-row {
width: 150px;
float: left;
}
.sp-row img {
display: block;
z-index: 1000;
position: relative;
}
サムネイル用のSPANタグは、現れる時に０から１へと拡大させることにより背部から登場してきたように演出しています。こちらも暫くするとフェードアウトしていきます。
.sp-row span {
position: relative;
float: left;
margin: 2px;
z-index: 100;
transform: scale(1);
opacity: 0;
animation:
fromBack 0.4s linear backwards,
fadeOut 0.3s linear backwards;
}
それから各サムネイルが順番に現れては消えるようなシーケンスを作成したいと思います。なので行ごとに、サムネイルを囲んでいる子要素（SPANタグ）１つ１つ順番に時間差設定を施していきます。各行は上の行から順に時計回りに表示されるようにしたいので、行の順番に注意して下さいね。
.sp-row:nth-child(1) span:nth-child(1) {
animation-delay: 0s, 5s;
}
.sp-row:nth-child(1) span:nth-child(2) {
animation-delay: 0.1s, 5.1s;
}
.sp-row:nth-child(1) span:nth-child(3) {
animation-delay: 0.2s, 5.2s;
}
.sp-row:nth-child(1) span:nth-child(4) {
animation-delay: 0.3s, 5.3s;
}
.sp-row:nth-child(1) span:nth-child(5) {
animation-delay: 0.4s, 5.4s;
}
.sp-row:nth-child(4) span:nth-child(1) {
animation-delay: 0.5s, 5.5s;
}
.sp-row:nth-child(4) span:nth-child(2) {
animation-delay: 0.6s, 5.6s;
}
.sp-row:nth-child(5) span:nth-child(5) {
animation-delay: 0.7s, 5.7s;
}
.sp-row:nth-child(5) span:nth-child(4) {
animation-delay: 0.8s, 5.8s;
}
.sp-row:nth-child(5) span:nth-child(3) {
animation-delay: 0.9s, 5.9s;
}
.sp-row:nth-child(5) span:nth-child(2) {
animation-delay: 1s, 6s;
}
.sp-row:nth-child(5) span:nth-child(1) {
animation-delay: 1.1s, 6.1s;
}
.sp-row:nth-child(2) span:nth-child(2) {
animation-delay: 1.2s, 6.2s;
}
.sp-row:nth-child(2) span:nth-child(1) {
animation-delay: 1.3s, 6.3s;
}
ここで少し疑似要素を使って、各サムネイルの背景に円が表示されるようにしてみましょう。
.sp-row span:before {
content: '';
position: absolute;
background-color: rgba(255,255,255,0.3);
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
border-radius: 50%;
}
お待たせしました。ここからがアニメーション部分です。
１つ目のアニメーションは透過度を１から０に変化させることにより、該当要素をシンプルにフェードアウトさせています。
@keyframes fadeOut{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
fadeInColorを使って該当要素をフェードインさせ、またRGBAで背景色の設定も行っています。けれどRGBAの透過度レベルは、要素そのものの透過度が０．５に達した時点でまだ０のままです。こうすることにより要素を先に表示させ、後から背景がフェードインしてくるように細工しています。２つめのヘッドラインにも同様の設定を施しています。
@keyframes fadeInColor{
0%{
opacity: 0;
background-color: rgba(255,255,255,0);
}
50%{
opacity: 0.5;
background-color: rgba(255,255,255,0);
}
100%{
opacity: 1;
background-color: rgba(255,255,255,0.3);
}
}
次のアニメーションも極めてシンプルで、該当要素を左側からスライドインしてくるように見せています。
@keyframes slideIn{
0%{
opacity: 0;
transform: translateX(-200px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
sizeDownMoveは該当要素を縮小させ、左（100px）から左（0px）まで移動させています。ここでtranslateを使用することも出来るのですが、要素をabsoluteで絶対配置させているので左側でちょっと動かす程度にしておこうかと思います。
@keyframes sizeDownMove{
0%{
transform: scale(1);
left: 100px;
}
100%{
transform: scale(0.6);
left: 0px;
}
}
次のアニメーションは、サイズを０から１に拡大することにより要素が後方から現れて来るよう見せ、同時に透過度も０から１に変化させています。
@keyframes fromBack{
0%{
transform: scale(0);
opacity: 0;
}
100%{
transform: scale(1);
opacity: 1;
}
}
これで１つ目のデモ用のスタイリングは完成です♪次はもっとシンプルなのでご安心くださいね。
Demo 2
今度は心にグサッとくるメッセージが連続して現れるスプラッシュページなんていかがでしょうか。今回のデモでは単純にボカシ効果を加えつつ、次から次へとメッセージが表示されるような効果を実現させています。
HTMLマークアップ
今回も先ほどと同じ様な感じでコンテナとコンテンツ用にDIVタグを用意し、更にその内部の各メッセージ部分にはframeというクラスを与えています。それに加えて一番最後に表示される地球とリンク用の要素も用意します。
<div class="sp-container"> <div class="sp-content"> <div class="sp-globe"></div> <h2 class="frame-1">It's destroying the planet</h2> <h2 class="frame-2">It's mass, mechanized murder</h2> <h2 class="frame-3">You can stop it</h2> <h2 class="frame-4">Now!</h2> <h2 class="frame-5"> <span>Save the planet.</span> <span>Love life.</span> <span>Go vegan.</span> </h2> <a class="sp-circle-link" href="index2.html">Join us!</a> </div> </div>
では早速スタイル設定を見ていきましょうか。
CSSスタイリング
ヘッドラインはそれぞれ画面上でセンタリングさせ、flurFadeInOutというアニメーションを使って現れたり消えたりさせています。
.sp-container h2 {
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
color: transparent;
animation: blurFadeInOut 3s ease-in backwards;
}
それぞれのメッセージに時差設定をします。
.sp-container h2.frame-1 {
animation-delay: 0s;
}
.sp-container h2.frame-2 {
animation-delay: 3s;
}
.sp-container h2.frame-3 {
animation-delay: 6s;
}
.sp-container h2.frame-4 {
font-size: 200px;
animation-delay: 9s;
}
最後の１つはアニメーション化させてず、代わりに含有しているSPANタグを順番にアニメーション化させています。
.sp-container h2.frame-5 {
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
animation-delay: 14s;
}
地球は実は背景画像であり、abosoluteで絶対配置しています。他のアニメーションが全て完了した14秒後にフェードインさせます。表示画面いっぱいに広がるよう拡大させています。
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
background: transparent url(../images/globe.png) no-repeat top left;
animation: fadeInBack 3.6s linear 14s backwards;
opacity: 0.3;
transform: scale(5);
}
「join us」リンクは円形の要素で、回転しながら現れてきます。
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
border-radius: 50%;
animation: fadeInRotate 1s linear 16s backwards;
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
ここからはアニメーション設定です。
１つ目のアニメーションは、現れては消えるメッセージ用のアニメーションです。text-shadowとthe scaleを巧く使ってボカシ効果を演出しています。
@keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
次のアニメーションも大体同じなのですが、今度は最後のメッセージ用で消えずに残ったままにしています。
@keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
地球用のアニメーションでは、画面一杯まで拡大させているのと、透過度を始めは増やしてそれから減らしています。
@keyframes fadeInBack{
0%{
opacity: 0;
transform: scale(0);
}
50%{
opacity: 0.4;
transform: scale(2);
}
100%{
opacity: 0.2;
transform: scale(5);
}
}
次のアニメーションはリンク用です。回転しながら現れてくるというものですね。
@keyframes fadeInRotate{
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
Demo 3
３つ目のデモは商品やアプリを紹介する時に使えるようなアニメーションで、テキストメッセージが色んな動きを見せてくれます。
HTMLマークアップ
またこちらも同じような感じでコンテナとコンテンツ用にDIVタグを用意し、更に右側用の要素と左側用の要素をそれぞれDIVタグでラッピングさせています。その狙いは右側と左側とできっちりと分けてテキストに動きを加えたいからです。
<div class="sp-container"> <div class="sp-content"> <div class="sp-wrap sp-left"> <h2> <span class="sp-top">What if you wouldn't get</span> <span class="sp-mid">spam</span> <span class="sp-bottom">anymore?</span> </h2> </div> <div class="sp-wrap sp-right"> <h2> <span class="sp-top">Wouldn't that be absolutely</span> <span class="sp-mid">great<i>!</i><i>?</i></span> <span class="sp-bottom">Yeah, it would!</span> </h2> </div> </div> <div class="sp-full"> <h2>A great way to get rid of spam!</h2> <a href="index3.html">Sign up now!</a> </div> </div>
ではここからはスタイル設定です。
CSSスタイリング
まず真ん中の縦線用の疑似要素を持たせたコンテンツエリアをアニメーション化させたいと思います。まるでそれが「開いて」そこからテキストが流れ出てきているかのように演出します。
それから縦線の左側で連続してテキストが右からスライドインしてくるように見せます。同様に右側もで、こちらは左からスライドインさせます。sp-midクラスを適用させたSPANタグのフォントは少し大きめにしてあり、他のテキストが消え去った後でもその場に残るようにしています。２つの大き目フォントのテキストを上に移動させ、コンテンツエリア全体をギュッと詰め寄らせています。（高さを減らすことにより縦線自体も短く変化します。）最後にサインアップ用のボタンを出現させています。
コンテナ部分の幅と高さは固定します。コンテンツのラッピングはまずアニメーションのopenで出現させ、それからaqueezeを適用させることにより高さを減らしています。後者の方は他のテキストが全てフェードアウトしてから発生させる為、開始時間はかなり遅めの設定です。
.sp-container {
width: 900px;
height: 400px;
position: relative;
margin: 80px auto 0px auto;
}
.sp-content {
width: 100%;
height: 400px;
position: relative;
animation:
open 0.4s linear forwards,
squeeze 0.6s linear 5.5s forwards;
}
真ん中の縦線は疑似要素を使って表示させています。
.sp-content:after {
content: '';
width: 4px;
background: #000;
height: 100%;
position: absolute;
left: 50%;
}
ヘッドライン用のラッピングではoverflowはhiddenにしてあります。こうすることによりスライドさせてもオーバーラップは見えないよう保障されます。
.sp-wrap {
width: 400px;
padding: 0px 25px;
height: 100%;
text-align: right;
font-size: 70px;
line-height: 80px;
float: left;
position: relative;
background: #ffdd00;
overflow: hidden;
}
H2要素は内側にSPANタグを含有しており、以下のようなスタイル設定を行っています。
.sp-container h2 {
color: #000;
text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
}
.sp-wrap span {
display: block;
background: #ffdd00;
opacity: 0;
}
.sp-wrap span.sp-mid {
opacity: 1;
}
.sp-container .sp-right h2 {
color: #fff;
text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}
.sp-wrap span.sp-mid {
font-family: 'MisoBold';
text-transform: uppercase;
font-size: 160px;
line-height: 130px;
position: relative;
}
「sp-top」と「sp-bottom」は左からスライドしてきてから消滅します。そして「sp-mid」はフェードアウトする代わりに上に移動します。
.sp-left span.sp-top {
animation:
slideLeft 0.5s ease-in 0.6s backwards,
fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {
animation:
slideLeft 0.5s ease-in 1s backwards,
moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {
animation:
slideLeft 0.5s ease-in 1.4s backwards,
fadeOut 1s linear 4.2s backwards;
}
右側でも同様の効果が現れるように設定します。ただこちら側は左から要素がスライドしてきます。
.sp-right span {
text-align: left;
}
.sp-right span.sp-top {
animation:
slideRight 0.5s ease-in 2s backwards,
fadeOut 1s linear 4.4s backwards;
}
.sp-right span.sp-mid {
animation:
slideRight 0.5s ease-in 2.4s backwards,
moveUp 0.6s linear 5s forwards;
}
.sp-right span.sp-bottom {
animation:
slideRight 0.5s ease-in 3.2s backwards,
fadeOut 1s linear 4.6s backwards;
}
sp-midクラスを持った２つの要素が上に移動した直後に、ビックリマークがクエスチョンマークを上書きしたように見せる為、クエスチョンマークをフェードアウトさせてビックリマークを出現させています。
.sp-wrap i {
position: absolute;
background: #ffdd00;
width: 60px;
}
.sp-wrap i:first-child {
color: #000;
}
.sp-wrap i:last-child {
opacity: 0;
animation: fadeOut 1s linear 6s backwards;
}
「sp-full」でラッピングされた最後に現れるテキストはフェードインさせて、サインアップリンクの方はズームインもさせています。
.sp-full {
position: absolute;
font-size: 67px;
top: 142px;
width: 700px;
left: 145px;
animation: fadeIn 1s linear 6.6s backwards;
}
.sp-full a {
background: #000;
color: #fff;
border-radius: 4px;
padding: 10px 40px;
display: inline-block;
font-size: 40px;
margin-top: 40px;
animation: zoomIn 0.7s ease-in-out 7s backwards;
}
.sp-full h2 {
width: 400px;
padding: 0px 50px 0px 0px;
float: left;
text-align: right;
}
.sp-full a:hover {
opacity: 0.8;
}
そしてここからはアニメーションです。
１つ目のアニメーションはコンテンツエリアを「開く」ことです。ただ単に高さを伸ばせば完成です。
@keyframes open{
0%{
transform: scale(1,0);
}
100%{
transform: scale(1,1);
}
}
スケーリング用のプロパティを使用していないので、squeezeアニメーションは実際は何もスクイーズしていません。この効果を適用させる時にコンテンツエリアにまだテキストが残っているのでスクイーズはさせず、ただ高さを減らすだけに留めています。
@keyframes squeeze{
0%{
height: 400px;
}
100%{
height: 120px;
}
}
次の２つのアニメーションは要素をフェードイン、フェードアウトさせているだけです。
@keyframes fadeOut{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
slideLeftとslideRightはtranslateを使用することにより反対側に要素を移動させています。
@keyframes slideLeft{
0%{
transform: translateX(120%);
}
100%{
transform: translateX(0%);
}
}
@keyframes slideRight{
0%{
transform: translateX(-120%);
}
100%{
transform: translateX(0%);
}
}
moveUpは要素を上に持ち上げています。
@keyframes moveUp{
0%{
transform: translateY(0px);
}
100%{
transform: translateY(-170px);
}
}
最後のアニメーションはscaleを０から１に変更することにより、要素をズームインさせています。
@keyframes zoomIn{
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
これで完成です！みなさんのお役にたてば幸いです。
