CSS Transitionsでかっこいいデザイン基礎編【スマホで試せます】

HTML5+CSS3が広まって数年経ちます。HTML5は多くの現場で使っていてスタンダードになりつつあるのかなあ、と思いますが、CSS3の方もだいぶ浸透している気がします(バージョン意識せず使えるので浸透も何もないですが)。というわけで今からじゃ遅いんだけど、勉強しないともっと置いてかれてしまうので頑張ろうというところです。

CSS3の変更点で有名なのは、角丸とかboxレイアウト、box-shadowなどですかね。今回勉強するCSS transitionsは、CSSプロパティの時間的な変化(アニメーション)を操作することができます。

CSS3アニメーションを始めるには?

CSS transitionsは特定のCSSプロパティをアニメーション可能にできます。アニメーションさせたい要素の定義に以下のプロパティを記述します。

transition CSS transitionsの短縮形です。以下はtransitionプロパティのサブプロパティです。
transition-property トランジションするプロパティを定義します。これがないと動きません。
transition-duration トランジションの実行にかける所要時間を指定します。
transition-timing-function 実際の説明は難しいので簡単に言うと、アニメーションの速度が変わる割合です。一定に動く、ゆっくり始まって動くといった具合です。
transition-delay トランジションの実行が開始されるまでの待ち時間です。

これだけ知っていればとりあえずアニメーションできます。では実際にいろいろ試していきます。

拡大するテキスト

まずは拡大するテキストをやってみます。まずはベースのHTMLを書きます。CSS3アニメーションのサンプルではマウスオーバーを使うことが多いのですが、それだとスマホで体験できないため、CSSだけでクリックイベントを疑似的に実現する方法を取ります。HTMLはこんな感じで、チェックボックスを使います。

次はCSSです。アニメーションを考えるときは、現在のコマと次のコマを決めます。

現在のコマは、テキストです。次のコマは、拡大されたテキストです。その2点をCSSで記述すると、以下となります。チェックボックスのチェックアイコンの部分は「visibility:hidden;」で非表示にして、ただのテキストのように見せています。

これだけだと、テキストをクリックすると突然文字サイズが大きくなります。そこにアニメーションを入れてだんだん大きくなるテキストを表現します。

このように2つのコマにトランジションを定義すると、2つの定義を補間するように動きます。「-webkit-」はベンダープレフィックスです。transitionに関しては、まだwebkitが必要です。

アニメーションの動き方を買える

今度は領域の幅を拡大するサンプルを使って、transition-timing-functionの説明をします。transition-timing-functionは、もう少し正確に言うとトランジションのタイミング関数といい、アニメーションの速度が変わる割合を3次ベジェ関数で計算する機能です。本来は、以下のように定義します。

これはさすがにすぐ理解できません。ということで、ある程度特徴的な動きについて、別の書き方が用意されています。

ease 最初と最後がなめらかに動きます。初期値です。
linear 一定の速度で動きます。
ease-in ゆっくり始まります。
ease-out ゆっくり終わります。
ease-in-out ゆっくり始まり、ゆっくり終わります。easeより最初と最後の動きが遅く見えます。

実際に試してみます。長方形をクリックするとそれぞれのタイミング関数で長方形が拡大されます。





トランジション定義はこんな風になります。

また、短縮形のtransitionプロパティを使うことでこういう風に書くこともできます。

今回はスクリプト書くのが面倒なので疑似クリックを使いましたが、現実的な方法ではありません。次回以降はいろいろなUI部品をアニメーションでかっこよく表現することに挑戦したいと思います。

広告
  • LINEで送る