关于伪元素背景的CSS动画

Question

我正在使用这个codepen示例使用伪元素创建一个完整的页面淡出，但它只是出现在这种形式中有点刺耳，id喜欢用CSS3动画淡入淡出，但当我尝试要将它们应用于CSS，它们都不起作用，我唯一能解决的是转换延迟。

http://codepen.io/css-tricks/pen/dxyfA

#login {
z-index: 2;
}
#login:after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: -1;
pointer-events: none;
}
#login:hover:after {
z-index: 1; 
background: rgba(0,0,0,0.75);
}

任何人都可以弄明白如何让背景元素淡入不透明的白色吗？