为什么这个不透明度动画不起作用?

时间:2014-01-13 09:33:20

标签: css animation opacity

这个动画有什么问题?

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

在chrome / firefox中我都看不到不透明度的消失......

2 个答案:

答案 0 :(得分:4)

您需要按原样设置父属性的转换(因此不要设置: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;
}

答案 1 :(得分:0)

更改为transition非动画

也许这就是你想要的我想到的JS Fiddle