CSS动画执着最终状态 [英] css animations persistent end state

问题描述

我有一个作为我的网页的全局contianer一个div元素，我也有这里面，我作为一个帘子，即使用一个div元素，当它被激活它涵盖了在黑暗的半透明层整个页面（只就像一个灯箱）这样的页面基本上是停用和一个警告对话框，或图片中，等，等可以在上面显示。

I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.

我可以很容易地用JavaScript实现这种效应和功能，但我想知道是否可以用CSS动画纯粹是实现？

I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?

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

所以当窗帘未激活它应该有透明度0和prefferably是显示：无; 来保持它的出路。然后，当它被激活它应该有显示：块和不透明度动画到0.8。然后，当它被停用，不透明度为动画回到0，那么就应该重新设置为显示：无;

so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;

就像我说的，我可以做到这一点很容易与JavaScript的，我只是想知道是否以及如何用CSS来完成而已？

Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?

推荐答案

您可以使用：
    动画填充模式：无/后退/前进/两者;

You can use: animation-fill-mode: none/backwards/forwards/both;

在'动画填充模式属性定义什么是由应用价值
  所执行的时间以外的动画

The ‘animation-fill-mode’ property defines what values are applied by the animation outside the time it is executing

从规格。

这篇关于CSS动画执着最终状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！