くまだどうも、くまだです。
例えば要素をホバーしたときに、transition使って簡易的なアニメーションを実装することはよくあると思います。
そのさいに、transitionにはプロパティをいれましょう、という話です。
transitionにはプロパティをいれる
transitionにプロパティとは、例えば以下のようなもの。
<div class="l-container">
<div class="p-button">
<a href="" class="c-button">ボタン</a>
</div>
</div>
.c-button {
padding: 8px 16px;
min-width: 120px;
display: inline-block;
text-decoration: none;
background: lightblue;
color: black;
text-align: center;
transition: background ease .4s,color ease .4s;
}
.c-button:hover {
background: pink;
color: red;
}
/* 調整用 */
body {
margin: 0;
padding: 0;
}
.l-container {
display: flex;
align-items: center;
height: 100vh;
justify-content: center;
}
transitonの部分、下記みたいにどのプロパティに対してtransitionを指定するのか明示的に示します。
transition: background ease .4s,color ease .4s;動作的には、別に下でも動くのですが。
transition: .4s;transitionでプロパティ指定してやると、プロパティ別にtransitionかけることができます。
transition: background ease .4s,color ease 1s;backgroundに.4秒、colorに1秒のtransition、みたいな感じ。
なお、transitionは下記プロパティの一括指定です。
- transition-delay：トランジションが始まるまでの待ち時間
- transition-duration：トランジションアニメーション完了までの時間
- transition-property：トランジションを適用するプロパティ
- transiton-timing-function：トランジション実行中の変更速度（easeとかlinearとか）
プロパティ1つ深堀りすると面白い。
ここまで読んでくださりありがとうございました。