移行前：背景（背景色）

私のサイトで要素がアクティブになっているときに、ボディにクラスを適用しています。私はモーダルのように残りのコンテンツをフェードアウトしたいが、私はこれまでに成功しなかったバックグラウンドオーバーレイをフェードインしたいと思う。移行前：背景（背景色）

.booking-open{ 
 
    transition:background-color 2s ease; 
 
} 
 

 
.booking-open:before{ 
 
    position:fixed; 
 
    left:0;right:0;top:0;bottom:0; 
 
    content:""; 
 
    z-index: 1; 
 
    background-color:rgba(0,0,0,.5); 
 

 
}

<body class="booking-open"> 
 
Demo 
 
</body>

私は、正しいものをほぼすべてのシナリオを試してみましたが、今のところいませんでした。私は間違って何をしていますか？

出典

2017-03-09 Morten Hjort

あなたはこのようにCSS3アニメーションを使用することができます。

@keyframes example { 
    from {background-color: inherit;} 
    to {background-color: rgba(0,0,0,.5);} 
} 

.booking-open:before{ 
    position:fixed; 
    left:0;right:0;top:0;bottom:0; 
    content:""; 
    z-index: 1; 
    background-color:rgba(0,0,0,.5); 
    animation-name: example; 
    animation-duration: 4s; 
}

例：https://fiddle.jshell.net/193w5pyz/1/

出典

2017-03-09 13:19:38 adys

移行前：背景（背景色）

答えて

関連する問題