CSS display:noneでアニメーションする方法

非表示から表示へ変わるとき、急にではなくアニメーションさせたい。

display:noneからdisplay:blockでアニメーションを設定したのに急に変わって、アニメーションしない!?なぜ!?どうすればいいの!?

そんなCSS display:noneでアニメーションする方法を解説します。

前提：display:noneはアニメーションできない

最初に言っておくとdisplay:noneからdisplay:blockにはアニメーションできません。

アニメーションは「0％から100%へ」というように数字の変化ならできますが、それ以外は基本的にアニメーションできないのです。

同様に「0からauto」という動きもできません。

しかし、「非表示から表示」へのアニメーションなら可能です。（もちろんその逆も可能です。）

下記から「非表示から表示」へのアニメーションの方法を解説します。

フェードイン・フェードアウトするとき

非表示には「display:none」ではなく「opacity:0」を使いましょう。

opacityは要素を透明にするCSSです。

0～1の数値を使うことができ、0なら透明、1なら不透明です。

よってopacityを0から1へアニメーションさせます。

以下の枠内にマウスを乗せると画像がフェードインします。

<style>
.opacity{
    border: 1px solid #333;
    padding: 10px;
    width: 200px;
    background: #f2f2f2;
}
.opacity img{
    opacity: 0;
    transition: .5s;
}
.opacity:hover img{
    opacity: 1;
}
</style>

<div class="opacity">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

上下へ表示させるとき

上記のフェードインでは最初からスペースがあります。

今度は最初はスペースがなく、ボタンを押したら、上下に伸びながら表示されるというものです。

heightを使って0から100％にしたいところですが、height:100%は親要素のheightがauto以外のときしか使えません。また使えたとしても、その中身がぐじゃっとなります。

ここではjavascript（jQuery）を使います。

とはいっても難しいコードではありません。

jQueryについては下記で解説しています。

下記のボタンをクリックするとその下の画像が表示・非表示されます。

<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $(".divbutton").click(function() {
        $(".height").slideToggle();
    });
});
</script>
    
<style>
.divbutton{
    background: #3fb952;
    color: #FFF;
    padding: 10px;
    display: inline-block;
    margin: 10px;
    cursor: pointer;
}
.height{
    width: 200px;
    padding: 10px;
    border: 1px solid #333;
    background: #f2f2f2;
    display:none;
}
</style>
<div class="divbutton">ボタン</div>
<div class="height">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

jQueryを使い、.divbuttonがクリックされたとき、.heightがslideToggleされるようにしています。

slideToggleを指定すると要素を縦にスライドすることができます。表示の時は非表示に、非表示の時は表示に、アニメーション付きで動作します。

しかも、高さだけではなく、paddingなども縮小され、崩れることもありません。

.heightには最初は表示されないようにdisplay:noneを指定しています。slideToggleが動作するとdisplayを元の状態にしながらアニメーションまでしてくれるわけです。

この動作についてはムリにCSSでやるよりjQueryを使った方がカンタンでキレイです。

左右へ表示させるとき

横からニョキっとでてくる方法です。スマートフォンのメニューでよく使われます。

下記の枠にマウスを乗せると横から表示されます。

<style>
.side-on{
    width: 200px;
    border: 1px solid #333;
    background: #f2f2f2;
    overflow: hidden;
}
.side-on img{
    margin-left: 100%;
    transition: .5s;
}
.side-on:hover img{
    margin-left: 0;
}
</style>

<div class="side-on">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
</div>

方法はいくつかあるでしょうが、簡単なのはmargin-leftで自身を欄外に押し出すことです。これだけだと欄外が見えてしまうので、親要素にoverflow: hiddenを指定し見えなくします。

上記は簡単にするためマウスオーバー時に動いていますが、jQeryを使ってボタンを押されたとき動作する、としてもいいでしょう。

【まとめ】CSS display:noneでアニメーションする方法

まず、display:noneをアニメーションすることはできません。

非表示から表示へのアニメーションをするなら他の手段をとりましょう。

フェードイン・フェードアウトするとき

opacityを0から1へアニメーションさせます。

上下へ表示させるとき

jQueryのslideToggleを使います。

左右へ表示させるとき

overflow: hiddenで隠し、margin-leftで欄外へ押し出します。

以上、CSS display:noneでアニメーションする方法でした。