CSS でトランジションを設定する
-
CSS でトランジションを設定するには、
transitionプロパティとともにopacityおよびvisibilityプロパティを使用する -
CSS でトランジションを設定するには、
transitionプロパティとともにheight、opacity、overflowプロパティを使用する
この記事では、CSS で遷移を設定する方法を紹介します。ここでは、opacity, height, visibility に transition を設定して、ホバリングおよびホバリング時にフェードインおよびフェードアウト効果を与える方法を学習します。
CSS でトランジションを設定するには、transition プロパティとともに opacity および visibility プロパティを使用する
CSS の display プロパティで transition プロパティを使用することはできません。たとえば、CSS の transition プロパティを使用して、ホバー（マウスイン）後に display : none を display : block に変更したり、その逆を行ったりすることはできません。したがって、トランジションとともに opacity および visibility プロパティを使用して、アイテムにフェードインおよびフェードアウト効果を与えることができます。Transition には、transition-property、transition-duration、transition-timing-function、transition-delay などの特定のプロパティがあります。遷移の省略形プロパティを遷移：不透明度 2s 線形 1s として使用することもできます。ここで、opacity は transition-property を示し、2s は transition-duration を示し、linear は transtion-timing-function を、1s は transition-delay を表しています。hover を使用して、transition を試すことができます。
たとえば、div を作成し、ul タグと li タグを使用して、3つの順序付けされていないリストアイテムのリストを作成します。div には見やすいように 1px solid black の境界線を付けて表示します。ul のプロパティを opacity: 0 と visibility: hidden、transition: visibility 0s, opacity 0.6s linear を設定します。opacity と visibility の両方を使用しています。これは、opacity: 0 のみを使用した場合でも、アイテムをクリックしてホバーできるためです。ul ホバープロパティを visibility: visible および opacity: 1 に設定して、ul のリストアイテムがホバリング中にのみ transition 効果で表示されるようにします。
次の例は、ul のアイテムがホバーしている間のみ表示されることを示しています。アイテムは 0.6 秒以内に線形効果で表示され、マウスを離すと再び非表示になります。
サンプルコード：
<div>
<ul>
<li> Apple </li>
<li> Banana </li>
<li> Mango </li>
</ul>
</div>
div {
border : 1px solid black;
}
div > ul {
visibility: hidden;
opacity: 0;
transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
visibility : visible;
opacity : 1;
}
CSS でトランジションを設定するには、transition プロパティとともに height、opacity、overflow プロパティを使用する
display: none および display: block でトランジションを使用する別の方法は、トランジションと一緒に使用される height、overflow、および opacity プロパティである可能性があります。リストに opacity : 0 と height : 0 を設定して、アイテムが表示されないようにすることができます。また、transition-duration に時間がかかる間、アイテムが div の外に出ないように overflow: hidden を設定する必要があります。最初の方法と同じように、transition 省略形プロパティを使用できます。
たとえば、div を作成し、ul および li タグを使用して 3つの順序付けされていないアイテムのリストを作成します。最初の方法と同じように、div に 1px solid black の境界線を付けます。ul のプロパティを opacity: 0、overflow: hidden および height: 0 として設定します。transition プロパティの値を opacity 0.6s ease-in として設定します。ul ホバープロパティを height: auto および opacity: 1 に設定して、ul のリストアイテムがいくつかの transition 効果でホバリングしているときにのみ表示されるようにします。
次の例は、div が空で、div の height が 0px であることを示しています。しかし、div にカーソルを合わせると、アイテムリストが ease-in 効果で表示されます。ease-in オプションは、トランジションのスロースタートを設定します。div の height プロパティは auto になります。div からホバーアウトすると、再び空になります。
サンプルコード：
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
</div>
div {
border: 1px solid black;
}
div > ul {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.6s ease-in;
}
div:hover > ul {
opacity: 1;
height: auto;
}