CSSでアニメーション【ボタンを動かそう編】

ウェブサイトで動きのある表現をしようとすると、ひと昔前ならFlash、そしてJavascriptなどが必須だったが、今やCSSでも色々な表現が可能となった。
そこで今回は、ボタンにアクションをつけてみた。
見た人にインパクトを与える「動き」を実践してみよう。

実際に使ってみる
まとめ

実際に使ってみる

アニメーションにはCSS TransitionとCSS Animationの2つのプロパティがある。
CSS Transitionは変化や移り変わりという意味で、変化するまでの時間を設定するプロパティ。
単純な動きのアニメーションにむいている。
一方のCSS Animationは、キーフレームアニメーションを適用できるプロパティで、細かい動きのアニメーションが実装できる。

早速、具体例でその働きを確認してみよう。
後者のCSS Animationを採用していて、

シンプル横ゆれ

【HTML】

`1`	`<img src="btn.png" class="btn01" />`

【CSS】

1.btn01 {
2  animation-name: shake01;
3  animation-duration:1.8s;
4  animation-timing-function: ease-in-out;
5  animation-iteration-count: infinite; 
6 }
7@keyframes shake01{
8from{
9transform: none;
10}
1110% {transform: translate3d(-2%, 0, 0);
12}
1325% {transform: translate3d(2%, 0, 0);
14}
1540% {transform: translate3d(-2%, 0, 0);
16}
1755% {transform: translate3d(2%, 0, 0);
18}
1970% {transform: translate3d(0, 0, 0);
20}
2199% {transform: translate3d(0, 0, 0);
22}
23to { transform: none;
24}
25}

中身を見てみよう。
CSS Animationは、キーフレームアニメーションを@keyframesで定義する必要があるので、まずはanimation-nameを定義。
animation-durationは、1回のアニメーション周期が完了するまでの所要時間を設定。
animation-timing-functionは、周期の中でどのように進行するかを設定するするプロパティで、ease-in-outは、ゆっくり変化し、速度を上げ、また速度を落とすという動きになる。
animation-iteration-countは、再生される回数を指定し、infiniteは無制限に繰り返す値。

また、@keyframes内のtranslate3dは、要素をX方向とY方向とZ方向の距離で3D移動を指定し、記述としては、translate3d(X方向の距離, Y方向の距離, Z方向の距離)となる。

ズームイン・アウト

【HTML】

`1`	`<img src="btn.png" class="btn02" />`

【CSS】

1.btn02{
2animation: bounce01 1.5s infinite ease-in-out;
3}
4@keyframes bounce01 {
50%, 100% { transform: scale(1.0) }
650% { transform: scale(0.9) }
7}

先ほどの横揺れと基本的には同じで、animation-name、duratio、timing-function、iteration-countをまとめた記述にすると上記のような記述になる。
@keyframes内のtransform: scaleは、大きさを指定していて、100％と90％の大きさでズームイン、ズームアウトを繰り返している。

着地してみた

続いて大きな動きにしてみました。
基本的には前述と同じで、応用編のようなものかな。

【HTML】

`1`	`<img src="btn.png" class="btn03" />`

【CSS】

1.btn03 {
2  animation: poyon 2.5s infinite linear;
3}
4@keyframes poyon {
5  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
6  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
7  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
8  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
9  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
10  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
11  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
12  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
13  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
14}