先生と生徒の会話形式で理解しよう

生徒

「CSSで要素を表示・非表示にしたいんですが、ただdisplay:noneを使うだけじゃアニメーションができません。どうすればいいですか？」

先生

「確かにdisplayプロパティは値の切り替えだけで、transitionには対応していません。ここではdisplayとtransitionを組み合わせてアニメーションっぽく見せる方法を解説します。」

生徒

「アニメーションしながら表示・非表示にするってどういうことですか？」

先生

「例えば、フェードイン・フェードアウトのように、透明度や高さを変化させることでスムーズに表示・非表示を切り替えることができます。」

1. displayとtransitionの基本的な関係

CSSのdisplayプロパティは要素の表示・非表示を切り替えるために使います。しかし、displayは二値（blockやnoneなど）しか持たないので、transitionで滑らかなアニメーションを作ることはできません。そこでopacityやheightなどアニメーション可能なプロパティと組み合わせるのが基本です。

2. opacityを使ったフェードイン・フェードアウト

opacityは要素の透明度を設定するプロパティです。0で完全に透明、1で完全に不透明になります。transitionと組み合わせることで滑らかに表示や非表示を切り替えられます。


<style>
.box {
    width: 200px;
    height: 100px;
    background-color: coral;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.box.show {
    opacity: 1;
}
</style>

<button id="toggleBtn">表示切替</button>
<div class="box"></div>

<script>
const box = document.querySelector('.box');
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
    box.classList.toggle('show');
});
</script>

ブラウザ表示

3. heightを使ったスライド表示

要素の高さ(height)をtransitionで変化させることで、スライドイン・スライドアウトのアニメーションを表現できます。display:noneを直接使うと高さが0になる前に消えてしまうため、visibilityやmax-heightを活用します。


<style>
.panel {
    background-color: lightblue;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.panel.open {
    max-height: 200px;
}
</style>

<button id="slideBtn">スライド切替</button>
<div class="panel">
    <p>ここに内容が入ります。高さのアニメーションで表示されます。</p>
</div>

<script>
const panel = document.querySelector('.panel');
const slideBtn = document.getElementById('slideBtn');
slideBtn.addEventListener('click', () => {
    panel.classList.toggle('open');
});
</script>

ブラウザ表示

4. displayとの併用の注意点

display:noneは要素を完全にDOMから消す動作になるため、transitionが適用されません。フェードやスライドのアニメーションを作る場合は、まずdisplay:blockやinline-blockで要素を残し、opacityやmax-heightでアニメーションしてから最後にdisplay:noneに切り替える工夫が必要です。

5. visibilityを使った表示切替

visibilityは表示・非表示を切り替えるプロパティで、hiddenにしても要素はレイアウト上に残ります。opacityと組み合わせることで、スムーズにフェードアウトさせることが可能です。


<style>
.tooltip {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.tooltip.active {
    opacity: 1;
    visibility: visible;
}
</style>

<div class="tooltip">ツールチップの内容</div>
<button onclick="document.querySelector('.tooltip').classList.toggle('active')">表示切替</button>

ブラウザ表示

6. transition-delayで時間差をつける

複数のアニメーションを順番に見せたい場合はtransition-delayを使います。表示切替にタイミング差をつけることで、要素が滑らかに順番に出現する演出が可能です。

7. まとめないけど覚えておくポイント

displayとtransitionを直接組み合わせることはできませんが、opacity、max-height、visibilityなどを工夫すればアニメーション付きで表示切替が可能です。初心者はまずフェードイン・フェードアウトやスライド表示の小さな例から試すと理解が進みます。JSでclassを切り替えるだけでも十分な表現力があります。