今回は、transitionプロパティを使用して、要素をhoverした際の滑らかな切り替えを実装していきたいと思います。
CSSが変化する際の要素の速度を指定できるプロパティです。
| transition-property | 変化させたいプロパティを指定できる | |||
| transition-duration | 要素が変化するまでの時間を指定できる | |||
| transition-timing-function | 速度とタイミングを指定できる | |||
| transition-delay | 要素が変化を開始するまでの時間を指定できる | |||
まずはtransition設定前の動きと、設定後の動きの違いをご覧ください。
transitionを設定する方が滑らかな動きになったのがわかります。
以下HTMLとCSSです。
<div class="hover">
transition指定あり
</div>.hover {
width: 300px;
border-radius: 10px;
background-color: #ed9d65;
color: antiquewhite;
padding: 30px;
cursor: pointer;
text-align: center;
transition-property: background-color;/*変化させたいプロパティを指定*/
transition-duration: 2s;/*要素が変化するまでの時間を指定*/
}
.hover:hover{
background-color:green ;
}hoverしてから指定の秒数後に変化させたい場合は、以下の記述を追加してください。
transition-delay: 1s;/*例：hoverして1秒後に変化する*/また、transitionプロパティで下記のようにショートハンドでの記述ができます。
transition: background-color 2s 1s;/*transition:変化させたいプロパティ 切り替わり速度 何秒後に変化*/
