CSSだけでもクリック・タップアニメーションできるよ

CSSだけでもクリック・タップアニメーションができる、ということを発見しました。

みんな通る道

要素が押されたときのスタイルを定義するときに使う、:activeという疑似クラスがあります。

ボタンにクリック・タップアニメーションを付けたいとき、:active疑似クラスを使えばできそうな気がしませんか。これ、やってみると上手くいかないんですよね。

:active疑似クラスに定義されているスタイルは、要素が押されている間のみ有効です。普通はクリック・タップするときって、押した瞬間に離しますよね。アニメーションする間もないんです。

でも、かといってアニメーション時間を一瞬にしたら、それでは何のアニメーションかわからなくなってしまいます。 やっぱり、クリック・タップしたら最初から最後までアニメーションする、というのが理想ではないでしょうか。

一般的な方法

では、どうすれば理想的なアニメーションをさせられるのでしょうか。一般的なのは、JavaScriptを使った方法でしょう。

アニメーション用のクラスを用意しておき、要素がクリックされたらクラスを追加します。アニメーションが終わったら、クラスを外します。

transitionでアニメーションした場合は？

先ほどはanimationを使いましたが、transitionでもアニメーションさせることができます。

アニメーションする間がないのは同じでした…。

transitionを考察してみる

突然ですが、transition:1sについて考えてみます。

アニメーションが終わるまで押し続けたらどうなるでしょうか。

赤っぽいピンク→まあまあ赤っぽいピンク→…という感じで、赤からピンク色に1秒掛けて変わってゆきます。この状態からボタンを放すと、ピンクっぽい赤→まあまあピンクっぽい赤→…と、さっきとは逆に1秒掛けて戻ります。

値は1s、つまり1秒に設定しているのに、往復2秒になっちゃってるんです。なぜでしょうか。

これは、:active要素の方でtransitionを定義していないので、暗黙のうちに親要素の値が継承されているからです。

もしかして、ちゃんと定義してあげれば、片道のアニメーションは可能なのでは…。

CSSだけでクリック・タップアニメーション

CSSだけでもできるんですね。ちょっと目からウロコでした。

からくり

答えを先に書くと、:active要素にtransition:noneを設定するだけでした。

戻りにアニメーションする分の間を稼げば良かったのです。アニメーションを設定しない場合、ボタンが押されるか離されるかすると、すぐに表示が変わりますよね。これと同じ挙動にできれば、戻りは全部アニメーションできます。ですので、:active要素にtransition:noneを設定して、アニメーションを無効にしているというわけです。

使うときのコツ

ここでバーンとサンプルを出せれば良いんですけど、できないのでコツだけ…。

transform:rotate(0)とtransform:rotate(360deg)のように、通常時とactive時の外観が同じだと違和感がなくなります。となると、transform系くらいしか選択肢がなくなるのですが。それが無理だったら、ボタンの押ししろを短くするなど、動きを小さくすると良いと思います。