淡出弹出窗口的背景

Question

我用Wordpress创建了一个网站，并使用插件Hustle创建了弹出窗口。 我希望灰色的背景（遮罩）在弹出窗口关闭时淡出。

这是我的代码，可以使背景遮罩淡入：

.wph-modal-mask.wpmudev-modal-mask  {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
animation: fadein 2s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

如果您访问我的网站http://michael-helmbrecht.de/main/ ，则单击投资组合中的第一张图片，您会看到弹出窗口。

Answer 1

赫鲁·迈克尔（Heloo Michael）

您可以像设置淡入淡出一样设置动画以淡出背景，唯一的区别是您可以像下面这样互换from和to的不透明度值

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-moz-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

指定关键帧后，可以将其应用于将要淡出的html元素的类，如下所示

.wph-modal-mask.fadeout-modal-mask  {
  -webkit-animation: fadeout 2s;
  -moz-animation: fadeout 2s;
   animation: fadeout 2s;
}