4

私のウェブページのグローバルコンティナーとして機能するdiv要素があります。また、カーテンとして使用するdiv要素もあります。つまり、アクティブにすると、ページ全体が暗い半透明のレイヤーで覆われます（ライトボックスのように）。 ）したがって、ページは基本的に非アクティブ化され、警告ダイアログや画像ボックスなどを上部に表示できます。

この効果と機能はjavascriptで簡単に実現できますが、純粋にcssアニメーションで実現できるかどうか知りたいですか？

<div id='globalCon'>
    <div id='curtain' class='enabled'></div>
    <div id='contentA'></div>
    <div id='contentB'></div>
    ... 
</div>

したがって、カーテンがアクティブでないときは、不透明度0にする必要があり、邪魔にならないようにすることが望ましいdisplay:none;です。次に、アクティブにするdisplay:blockと、不透明度が0.8にアニメーション化されます。次に、非アクティブ化すると、不透明度は0にアニメーション化され、次にに設定されます。display:none;

私が言うように、私はjavascriptでこれを簡単に行うことができます、私はそれがcssだけでできるかどうか、そしてどのようにできるか知りたいだけですか？

4

1 に答える 1

5

使用できるもの：animation-fill-mode：none / backwards / forwards / both;

'animation-fill-mode'プロパティは、アニメーションが実行されている時間外にアニメーションによって適用される値を定義します

仕様から。

于 2012-06-20T17:06:03.133 に答える