前回のテキストのCSSアニメーションに続いて、今回はボックスのアニメーションです。
比較的基本的な11タイプのアニメーションを作ってみました。
全て基本は、一定の大きさの長方形です。
まずはデモをご覧ください。
最初にこれら全てのコードを記載します。
<html>
<head>
<style>
ul {list-style-type: none;}
li {float: left;}
table {width: 46vmin; height: 230px; border: 1px #333 solid; border-collapse: collapse; table-layout: fixed;}
table th {height: 30px; border: 1px #333 solid;}
table td {height: 200px; border: 1px #333 solid;}
.box {margin: 5%; width: 90%; height: 90%; box-sizing: border-box;}
.box1 {background-color: blue; animation: demo1 5s infinite;}
@keyframes demo1{
0% {opacity: 0;}
100% {opacity: 1;}
}
.box2 {background-color: #096; animation: demo2 2s infinite;}
@keyframes demo2{
0% {height: 0;}
100% {height: 90%;}
}
.box3 {background-color: #845; animation: demo3 2s infinite;}
@keyframes demo3{
0% {width: 0;}
100% {width: 90%;}
}
.box4 {animation: demo4 10s infinite;}
@keyframes demo4{
0% {background: hsl(0 100% 50%);}
8% {background: hsl(30 100% 50%);}
16% {background: hsl(60 100% 50%);}
24% {background: hsl(90 100% 50%);}
32% {background: hsl(120 100% 50%);}
40% {background: hsl(150 100% 50%);}
48% {background: hsl(180 100% 50%);}
56% {background: hsl(210 100% 50%);}
64% {background: hsl(240 100% 50%);}
72% {background: hsl(270 100% 50%);}
80% {background: hsl(300 100% 50%);}
88% {background: hsl(330 100% 50%);}
96% {background: hsl(360 100% 50%);}
}
.box5 {background: #EF3; animation: demo5 5s linear infinite;}
@keyframes demo5{
0% {margin-left: 5%; width: 90%; height: 90%;}
50% {margin-left: 5%; width: 90%; height: 90%;}
60% {margin-left: 50%; width: 0%; height: 0%;}
100% {margin-left: 50%; width: 0%; height: 0%;}
}
.wrap6 {perspective: 1000;}
.box6 {animation: demo6 2s infinite;}
@keyframes demo6{
0% {transform: rotateY(0); background-color: #EAF;}
100% {transform: rotateY(180deg);background-color: #CBF;}
}
.wrap7 {position: relative;}
.box7-1 {position: absolute; left: 5%; top: 5%; width: 45%; height: 90%; background: #777; animation: demo7-1 2s linear infinite;}
.box7-2 {position: absolute; left: 50%; top: 5%; width: 45%; height: 90%; background: #777; animation: demo7-2 2s linear infinite;}
@keyframes demo7-1{
0% {width: 45%;}
100% {width: 0%;}
}
@keyframes demo7-2{
0% {width: 45%; left: 50%;}
100% {width: 0; left: 95%;}
}
.wrap8 {position: relative; perspective: 1000;}
.box8-1 {position: absolute; left: 5%; top: 5%; width: 45%; height: 90%; transform-origin: left; background: #800; animation: demo8-1 2s linear infinite;}
.box8-2 {position: absolute; left: 50%; top: 5%; width: 45%; height: 90%; transform-origin: right; background: #800; animation: demo8-2 2s linear infinite;}
@keyframes demo8-1{
0% {transform: rotateY(0deg);}
100% {transform: rotateY(90deg);}
}
@keyframes demo8-2{
0% {transform: rotateY(0deg);}
100% {transform: rotateY(-90deg);}
}
.box9 {background: repeating-linear-gradient(45deg, #F77 0, #77F 10%); background-size: 500% 500%; animation: demo9 5s linear infinite;}
@keyframes demo9{
0% {background-position: 0 0;}
100% {background-position: 0% 100%;}
}
.box10 {height: 180px; border: 0 #0F0 solid; animation: demo10 1s infinite;}
@keyframes demo10{
0% {border-width: 0;}
100% {border-width: 20px;}
}
.box11 {background-image: repeating-conic-gradient(hsl(20, 100%, 70%) 0%,hsl(70, 100%, 100%) 10%); animation: demo11 5s infinite}
@keyframes demo11 {
0% {width: 0%; height: 0%; border-radius: 50%; margin-left: 50%;}
100% {width: 90%; height: 90%; border-radius: 0;margin-left: 5%;}
}
}
</style>
</head>
<body>
<ul class="mysort">
<li>
<table>
<tr>
<th>DEMO1</th>
</tr>
<tr>
<td>
<div class="box box1"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO2</th>
</tr>
<tr>
<td>
<div class="box box2"><d/iv>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO3</th>
</tr>
<tr>
<td>
<div class="box box3"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO4</th>
</tr>
<tr>
<td>
<div class="box box4"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO5</th>
</tr>
<tr>
<td>
<div class="box box5"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO6</th>
</tr>
<tr>
<td class="wrap6">
<div class="box box6"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO7</th>
</tr>
<tr>
<td class="wrap7">
<div class="box7-1"></div>
<div class="box7-2"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO8</th>
</tr>
<tr>
<td class="wrap8">
<div class="box8-1"></div>
<div class="box8-2"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO9</th>
</tr>
<tr>
<td>
<div class="box box9"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO10</th>
</tr>
<tr>
<td>
<div class="box box10"></div>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO11</th>
</tr>
<tr>
<td>
<div class="box box11"></div>
</td>
</tr>
</table>
</li>
</ul>
</body>
</html>
それぞれテーブルの枠の中に入れたので、コードが冗長ですが、それぞれのアニメーションは、上のスタイルのところと、簡単なタグのみで簡単です。
CSSアニメーションの基本的な書き方については、前回の「CSSアニメーション入門 -簡単に!-」をご覧ください。
では一応(笑)、一つ一つ解説です。
DEMO1: 出現するボックス
透明度opacityを0から1に上げてボックスを出現させています。
これは最も基本的なアニメーションかもしれません。
ちなみに、ここでは使っていませんが、最初画面に現れないようにするには、display: none;を使ったりします。この場合は、存在そのものがなくなっている点に注意が必要です。一方、opacity: 0 は見えていないというだけのことです。
DEMO2: 高さを拡大
ここでは、テーブルセル内に配置していますので、ボックスは中央から上下に拡大します。何もないところでこのアニメーションをさせると、上から下に拡大します。
上端に固定したい時は、親要素のtdタグに、vertical-align: topを指定するのが良いでしょう。
言うまでもないですが、この動きを反対にすると、閉じるような動きが実現できます。
DEMO3: 幅を拡大
今度は幅のwidthを変化させます。
初期値が左詰なので、左から右に広がります。
DEMO4: 背景色の変化
ここでは、20秒かけて色環の周りを、虹のように色を変化させています。
色は、数通りの指定の仕方がありますが、ここでは、最新式のhslの方式を使ってみました。
DEMO5: 縮小して無くなるボックス
プチンとボックスが縮こまって無くなるような動きです。
幅のwidthと高さのheightを一緒に変化させています。
また、左詰が初期値ですので、margin-leftも一緒に変化させることで、中央位置に固定されるようにしています。
DEMO6: 裏返す動き
Y軸周りの180度の回転で裏返しています。
親要素にperspectiveを指定すると、奥行きが出ますので、裏返していることがよくわかるようになります。
DEMO7: 両側に開く動き
今度はボックスを左右の二つに分けて指定し、ふすまやカーテンのように、両側に開く動きです。
これも幅のwidthを変化させますが、位置が移動しないように工夫しています。
先ほどのmargin-leftだと隣の要素との距離となり複雑になりますから、ここでは、親要素にposition: relativeを指定し、子要素のそれぞれのボックスにposition: absoluteを指定します(このrelativeとabsoluteはこのようにセットにして使われます)。
ですから、左からの位置は、margin-leftではなく、単にleftとして、セル内の絶対的な位置として指定できます。
DEMO8: 観音開きの動き
今度は、扉のような動きです。
DEMO7とは違いここでは、回転を使います。Y軸周りの回転です。
また、奥行きを出すために親要素にperspectiveの適当な数字を設定します。これがないとDEMO7と同じ動きになってしまいます。
DEMO9: グラデーションの移動
単一のグラデーションではわかりにくいことあり、ここではrepeatingの付いたrepeating-linear-gradientを用いて、縞模様の位置移動をさせてみました。
45度の角度を指定しているので斜めになります。
background-positionを移動させることで、動かすようにしています。
DEMO10: 境界線幅を変化
境界線の幅を示すborder-widthを変化させています。
クラス名のboxにあるbox-sizing: border-box;を消すと、変化とともにセル枠をはみ出すので注意してください。
box-sizing の初期値はcontent-boxで、境界線などを除いた中身の部分だけの大きさになります。
一方、ここで指定したように、border-boxにすると、境界線も含んだ大きさになります。
なお、ここでは、ボックスのサイズの90%を上書きして、180pxとしました。これがないと、変化とともに、なぜか高さが縮みます。パーセントに基づく計算がセルの高さから罫線幅は除いた部分を基準にしているのかもしれません。
DEMO11: 放射線状グラデーションとボックスの拡大
放射線状のグラデーション自体を動かすのはCSSだけではなかなか難しそうです。
いずれJavaScriptでやってみたいと思いますが、ここではその代わりに、枠の丸みを変化させながら拡大してみました。
最初は楕円形ですが、だんだんと長方形に変わっていきます。
border-radiusに50%を設定すると楕円形にすることができます。
放射線状のグラデーションは、このようにrepeating-conic-gradientを使うと実現できます。
ここではCSS3から使えるようになったhslの方式で色を二つ選択し、0から10%分を指定し、繰り返し(repeting)を使うとこのようになります。
まとめ
いかがでしたか。
今回はボックスのデザインをCSSアニメーションでやってみました。
実際に活用する時は、ここにあるinfiniteで無限に繰り返すのではなく、一定時間後に一回きりや、スクロール量に応じて反応させたり、クリックなどのイベントに対して反応させたりする必要がある場合が多いと思いますが、その方法については、またいずれブログにしていきたいと思います。
むしろホーバー時のエフェクトなどにふさわしいかもしれませんので、いずれ近々、その書き方についてブログにしたいと思います。
動きだけでもご参考にしていただければ幸いです。