なめらかなアニメーション
いまの変化は一瞬すぎる
前回で色は変わるようになりましたが、切り替わり方は一瞬です。マウスが少し動くたびに色がパッと入れ替わるので、手ごたえよりもチカチカする印象が残ります。変化に少しだけ時間をかけると、同じ CSS でも落ち着いて上質に見えます。
transition はもとの側に書く
transition は、どのプロパティを何秒かけて変えるかを決めるプロパティです。書く場所は :hover のほうではなく、もとのルールのほうです。
a {
color: #0071e3;
transition: color 0.2s;
}
a:hover {
color: #004f9e;
}もとの側に書くと、乗せたときと外したときの両方が同じ速さで変わります。:hover の中に書いてしまうと、戻るときだけ一瞬になってちぐはぐな動きになります。
値は「対象のプロパティ 時間」の順で書きます。変わるものが2つあるときはカンマで区切って transition: background-color 0.2s, transform 0.2s; のように並べます。時間は 0.2s あたりが目安です。1 秒を超えると、速く操作したい人にはもたつきとして感じられます。
もとのルールが無いものは作る
表の行には :hover のルールしかありません。もとの側が無いので、.skill-table tbody tr のルールを新しく作り、そこに transition を書きます。
課題
a、.hobby-item、.form-input、.submit-buttonのもとのルールにtransitionを足す.skill-table tbody trのルールを新しく作り、transitionを書く- 変化にかける時間は 0.2s にそろえる