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

这个动画怎么了？

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

在chrome / firefox中，我都看不到不透明的褪色...

最佳答案

您需要按原样在父属性上设置过渡（因此无需在：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;
}

关于css - 为什么这种不透明动画不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21087777/