簡単にアニメーションを実装したい。transitionのつかいかたをざっくりとまとめてみた -『CSS』
WebページはHTML(コンテンツ)・CSS(プレゼンテーション)・JavaScript(ふるまい)という３つのレイヤーがあると考えられます。
しかし、その分離は絶対的なものではなく、webkitが開発した transition / animation のモジュールでさらにあいまいなものになりました。
そのうち簡単に実装できるtransitionのはなしです。
transitionは適用対象のプロパティの値が変わると発生します。
transition
CSS2.1には中間の値が定義されていなかったので、プロパティの値が変化すると瞬間的に表示が変化していました。
これをなめらかにするために、CSS3では、Transitionモジュールが定義されました。
トランジションは、あるプロパティに新しい値がセットされた時にのみ開始します。(これを暗黙のアニメーションと呼んでいます)
設定項目として、初期値/終了値/トランジション自体/トリガーの４つがあります。
css
.ex {
color: #000;
transition: color .5s;
}
.ex:hover {
color: #aaa;
}
設定項目
上記サンプルコードに以下の内容を設定しています。
- 初期値
- color: #000
- 終了値
- color: #aaa
- トランジション
- transition: color .5s
- トリガー
- :hover擬似クラス
check
トランジションのプロパティは主要ブラウザに実装されているのでベンダーごとのプレフィクスは必要ありません。
ただ、webkit系の古いブラウザ(Android4.4以前)に対応するには-webkit-を追記しておきましょう。
transition関連のプロパティ
最後に短縮記法を紹介しますが、まずはtransition関連のプロパティをひとつひとつ紹介していきます。
transition-property
アニメーションを行いたいプロパティを指定します。
css
ex {
transition-property: keyword
}
キーワードにはall/none/cssのプロパティを記述します。
- all
- すべてのプロパティに対してアニメーションを発生させます。
- none
- どのプロパティにも指定しません。
- cssのプロパティ
- 記述したプロパティにのみ発生させます。
css
p {
margin: 1em;
transition-property: margin;
}
transition-duration
開始から終了までの時間を指定します。
トランジションに必須の値はこれだけです。
css
ex {
transition-duration: time;
}
- 時間の単位は秒です。
- デフォルトの値は０です。
css
p {
margin: 1em;
transition-property: margin;
transition-duration: 1s;
}
transition-timing-function
速度を変更でき、動きのペースを指定します。
関数cubic-bezier()とsteps()とキーワードで指定することができます。
キーワード指定
css
ex { transition-timing-function: keyword; } //デフォルト値はease
- ease
- ゆっくり-加速-ゆっくり
- linear
- 一定
- ease-in
- ゆっくり-加速
- ease-in-out
- easeの変化を緩やかに
３次ベジェ曲線
詳細な指定にはcubic-bezier()関数を使って３次ベジェ曲線を定義して動くペースを決めます。
css
ex {
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
}
３次ベジェ曲線は、４つの点を使って描くスムーズな曲線(イラレのペンツールのやつ)のことで、点の位置で曲率を定義します。
点は(x, y)座標で表現し、P0とP3はいつも(0, 0)と(1, 1)に固定され、P1とP2を関数で指定します。
- x軸
- 時間経過
- y軸
- アニメーションの進行
cubic-bezier()関数のジェネレーターについてはcubic-bezier.comが有名です。
自分で自由に簡単にベジェ曲線をいじって関数を指定することができます。
定義した関数を実行すると、比較となるもの(最初から定義されているが、独自に追加することも可能)と一緒に動きを確認することができます。
適当にベジェのポイントを引っ張って遊んでみるだけでもとっても楽しいです。
いろいろ試したあとは、自分の定義した値をコピペしましょう。
my easing
使いたい動きをクリックするとコピペで実装できるEasing Functions Cheat Sheetこちらも便利です。
30種類のイージングがベジェ曲線で表現されており、CSSで表現できないものもありますがマウスオーバーで動きを一つ一つ確認することができます。
steps()関数
スムーズでないトランジションをしたい場合は、steps()関数を利用する。
トランジションを複数の段階に分けて、飛び飛びに進行させることができる。
css
ex {
transition-timing-function: steps(count, direction);
}
- count
- アニメーションを分割する数(整数)
- direction
- start/endどの時点で変化が発生するか(省略可能)
css
ex {
transition-timing-function: steps(3);
}
コマ送りのようなトランジションが起きます。(３つのタイミングで)
directionキーワードは、分割したタイミングの中で、いつ変化が起こるかを指定します。
- end(デフォルト)
- まず停止して、それから変化するというのが繰り返されます。
- start
- 変化して、停止するという手順になります。
transition-delay
開始する時間を指定します。
css
ex {
transition-delay: time;
}
- timeの単位はms(ミリ秒)かs(秒)になります。
- ゼロ以外の正の値を指定すると、その時間を経過してからトランジションが開始します。
css
p {
margin: 1em;
transition-property: margin;
transition-duration: 1s;
transition-delay: 800ms;
}
負の値を指定すると、その値だけスキップした状態でトランジションを即座に開始します。
css
p {
margin: 1em;
transition-property: margin;
transition-duration: 1s;
transition-delay: -1s; //すでに１秒たった状態からスタート
}
transitionの短縮記法
css
ex {
/* transition: property duration delay timing-function; */
transition: margin 1s .8s ease;
}
時間の値に注意
１つめがtransition-duration、２つめがtransition-delayをそれぞれ表しています。
１つだけ指定するとtransition-durationとみなされるので注意です。
transitionの複数指定
transitionをプロパティごとにタイミングを変えたり、複数指定したいときはカンマ区切りで記述しましょう。
これで複数のプロパティに対して指定できます。
css
ex {
transition: margin 1s .8s ease,
padding 1.4s .4s linear,
font-size .4s 1.4s linear;
}
さいごに
適当なサンプルを作成しました。
薄くなって、回転して、びゅーーんとなりますよ。
css
.ex {
position: relative;
left: 0;
width: 20px;
height: 20px;
background-color: hsla(200, 50%, 50%, .8);
transition: background-color .4s, -webkit-transform .6s .4s, width .6s 1s;
transition: background-color .4s, transform .6s .4s, width .6s 1s;
}
.ex:hover {
width: 100%;
background-color: hsla(200, 50%, 50%, .4);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
