普段使っている「transition」を、自分はあやふやにまとめて定義していました。
自分がそうなら、きっとみんなもそうだろうと思い改めて詳しく勉強したいと思います。
transitionとは？
transitionとは、Google翻訳すると「遷移」となり、始点の要素から終点の要素までの状態変化を定義することができるプロパティ。
状態変化をするtransitionプロパティには、４つの要素がまとまっています。
その４つは
「transition-property」
「transition-duration」
「transition-timing-function」
「transition-delay」
です。
この４つをまとめて指定できるのが「transition」だ。
この４つがなんだかわかり辛いので、ひとつずつ見ていきます。
「transition-property」について
「transition-property」は、トランジション効果を適用するCSSプロパティ。
例えば、
.tatoeba {
transition-property: font-size, color;
}
と指定すると、フォントサイズとフォントカラーの状態が変化できるようになる。
ひとつだけでも指定できるし、2つ以上の複数指定も可能だ。
その他にもこんな指定ができる。
.sonohoka_1 {
transition-property: all;
}
.sonohoka_2 {
transition-property: none;
}
「.sonohoka_1」は全てを変化できるようにし、逆に「.sonohoka_2」は、全部変化させない。
初期値が「all」なので、特にこの「transition-property」は気にしなくってイイってことが分かったぜ！
次！
「transition-duration」について
「transition-duration」は、変化（アニメーション）が終わるまでの時間を秒数（s）、またはミリ秒数（ms）で指定するプロパティ。
初期値は、「0s」になっておりこれは変化時間が無い、つまりアニメーションしないということを表します。
初期値が「0s」なので、秒数（s）を使うのが一般的だと思われがちだが、秒数（s）、ミリ秒数（ms）のどちらを使ってもよく自分はミリ秒数（ms）を使っている。
先に挙げた「transition-property」で複数の要素を指定すると、「transition-duration」も複数指定で、別々のタイミングで変化（アニメーション）させたい時に便利。
.rei_1 {
transition-duration: 500ms;
}
.rei_2 {
transition-duration: 0.5s;
}
.rei_3 {
transition-duration: 1s;
transition-property: background-color;
}
.rei_4 {
transition-duration: 1s, 500ms;
transition-property: background-color, font-size;
}
上のCSSは、「transition-duration」の書き方をまとめたもの。
「.rei_1」は、500ミリ秒（0.5秒）で変化します。
「.rei_2」は、上と一緒で0.5秒（500ミリ秒）かけて変化します。
「.rei_3」は、背景色を1秒（1000ミリ秒）かけて変化します。
「.rei_4」は、背景色が1秒（1000ミリ秒）かけて変化し、フォントサイズが500ミリ秒（0.5秒）かけて変化する。
秒数を表す単位の「s」と「ms」は、このように混ぜて使うとよくわからなくなりがち。
どちらかに統一したほうが見やすいし、自分でも書きやすい。
上にも書きましたが、自分は大体「ms」を使うので、たま～に「s」を使うと、変な感じがしてました。
ちなみに、秒数を負の値にすると「0s」とみなされます。
「transition-timing-function」について
「transition-timing-function」とは、加速曲線を定義するプロパティで、一定の速度にする記述や、時計の秒針の様な動きにする記述があり、質感の出る動きを可能にする楽しいヤツ。
「transition-timing-function」は様々な指定方法があり、「ease」や「swing」、「step-start」や関数値の「steps(12, end)」、「cubic-bezier(0.645, 0.045, 0.355, 1)」、「frames(12)」など、どれも面白いアニメーションになる。
「transition-delay」について
「transition-delay」とは、変化する前の待ち時間をしていするプロパティ。
こちらも最初に挙げた「transition-property」と組み合わせることで複数指定することが可能だ。
.rei_5 {
transition-delay: 400ms;
transition-duration: 600ms;
}
.rei_6 {
transition-delay: 400ms;
transition-duration: 600ms;
transition-property: font-size;
}
.rei_7 {
transition-delay: 400ms;
transition-duration: 600ms;
transition-property: font-size;
transition-timing-function: ease-in-out;
}
.rei_8 {
transition-delay: 400ms, 1000ms;
transition-duration: 600ms, 200ms;
transition-property: font-size, background-size;
transition-timing-function: ease-in-out, linear;
}
「.rei_5」は、0.4秒待ってから0.6秒で変化します。
「.rei_6」は、0.4秒待ってからフォントサイズを0.6秒かけて変化させます。
「.rei_7」は、0.4秒待ってからフォントサイズを0.6秒かけて最初と最後をゆっくり変化させます。
「.rei_8」は、0.4秒待ってからフォントサイズを0.6秒かけて最初と最後をゆっくり変化させます。
さらに、1秒待ってから背景サイズを0.2秒かけて同じスピードで変化させます。
一括で指定できる「transition」
「transition」は、今まで紹介してきました4つの要素をまとめて指定ができます。
書き方は複数のの要素を一括で指定するため、見た目がごちゃごちゃします。
「animation」プロパティも一括で指定できるので、その辺りは似ています。
「margin」や「padding」、「border」も上下左右を一つのプロパティで指定できるので一括指定プロパティになります。
役割は違えど、みんな一括指定プロパティの仲間なんです。
「transition」を書くとき、「transition-property」はアニメーションする要素に制限をつけるので、初期値の「all」をそのまま使うという意味で、省略できます。
.rei_9 {
transition: 800ms;
}
.rei_10 {
transition: 800ms 200ms;
}
.rei_11 {
transition: 800ms 200ms ease-in-out;
}
.rei_12 {
transition: linear 200ms 800ms;
}
「transition-property」を記述すると複数の、要素に対して別々の変化をさせることができます。
ですが、ほぼ利用することがないため例としてあげていません。
「.rei_9」は、800ミリ秒（0.8秒）で変化します。
「.rei_10」は、200ミリ秒（0.2秒）待ってから、800ミリ秒（0.8秒）で変化します。
「.rei_11」は、200ミリ秒（0.2秒）待ってから、800ミリ秒（0.8秒）で最初と最後はゆっくりと変化します。
「.rei_12」は、800ミリ秒（0.8秒）待ってから、200ミリ秒（0.2秒）で均一に変化します。
「.rei_12」のように、値の順番を変えると、変化する数値も変わってしまします。
「transition-duration」と「transition-delay」は、記述位置が正確な場所でないと、数値がむちゃくちゃになってしまうので気を付けてください。
この順番、「変化時間（transition-duration）」の次が「待ち時間（transition-delay）」は覚えておくと便利です！
今日は、「transition」について書きました。
コメント