css - 为什么这个不透明动画不起作用？

Question

这个动画有什么问题？

.homepage-box:hover .shadow-layer
{
    opacity:0.70;
    -webkit-animation: opacity 5s;
    -moz-animation: opacity 5s;
}

在 chrome/firefox 中我都看不到不透明度的淡化...

Answer 1

您需要按原样在父属性上设置过渡(所以不是在 :hover 上)。

.homepage-box .shadow-layer {
    opacity: 1;
    transition: opacity 5s ease-in-out;
    -moz-transition: opacity 5s ease-in-out;
    -webkit-transition: opacity 5s ease-in-out;
}

.homepage-box:hover .shadow-layer {
    opacity: 0.7;
}