带有淡入淡出图像的 CSS

Question

我有一个 ux 开关，可以打开和关闭图片效果。

http://plnkr.co/edit/JcPXpP0jE5GysBbZbrkp

我希望图片在 1 秒内从一张淡出到另一张，但我似乎无法在 CSS 中实现淡入淡出。任何帮助都会很棒，谢谢。

.off 
{ 
    opacity: 1; 
    -moz-transition: opacity 1s ease-in; 
    -o-transition: opacity 1s ease-in; 
    -webkit-transition: opacity 1s ease-in; 
    transition: opacity 1s ease-in; 
    position:relative; 
    z-index:2; 
}

Answer 1

据我所知，没有动画，因为您正在交换 img src 属性。这种交换是不可能动画的。我的建议是加载两张图片，将一张放在另一张后面，并设置前面一张的不透明度动画。这是我的 plnkr:http://plnkr.co/edit/7uakbxwZETNnBiOAOfys?p=preview