CSS正常翻译

我正在用CSS制作一个模式弹出窗口，在点击链接后会出现并向下翻译（translateY）。我的问题是弹出窗口确实出现了，但它已经在下降。我知道如何在悬停状态下进行翻译，但我不知道如何在没有悬停状态下进行翻译。谁能给我一些建议吗

HTML

JSFIDLE

---

CSS转换使属性值的更改在查看者看来是平滑的（tween？）

在这里，您永远不会更改css属性的值，因此没有任何可设置动画的内容

必须有两个具有不同值的css状态。您需要javascript或复选框来实现这一点

您可以使用javascript在body元素上切换类，例如，或

然后你可以用

/* Normal state */
.C{
    opacity: 0;
    transition: all .3s;
}
/* Open state */
:checked ~ .C,
/* OR */
body.open .C{
    opacity: 1;
}

---

在这个代码片段示例中，不透明度将在0和1之间变化时设置动画。

在单击链接之前，弹出窗口具有

opacity:0

，那么它是否在该状态下翻译对您有什么影响？或者你只是在问如何进行动画转换？是的。。我的意思是它会在弹出窗口出现后向下翻译。您好，先生。。我以前做过。。但背景灰也很活跃。我只需要将弹出窗口设置为动画：（然后使用

.B:target.C

或其他什么

.B {
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background:rgba(0,0,0,0.8);
    opacity:0;
    z-index:99999;
    pointer-events:none;
}
.B:target {
    opacity:1;
    pointer-events:auto;
}
.B > .C {
    width:100px;
    height:100px;
    background:#FFF;
    background:-moz-linear-gradient(#FFF, #999);
    background:-webkit-linear-gradient(#FFF, #999);
    background:-o-linear-gradient(#FFF, #999);
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    -ms-border-radius:15px;
    -o-border-radius:15px;
    border-radius:15px;
    position:relative;
}
.C {
-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;    
-webkit-transform: translate(0px, 50px);
-moz-transform: translate(0px, 50px);
-o-transform: translate(0px, 50px);
-ms-transform: translate(0px, 50px);
transform: translate(0px, 50px);
}

/* Normal state */
.C{
    opacity: 0;
    transition: all .3s;
}
/* Open state */
:checked ~ .C,
/* OR */
body.open .C{
    opacity: 1;
}