Question

我正在研究我的投资组合，我正在尝试使用淡入淡出的视差效果。

我更喜欢动画的CSS3过渡我只使用Jquery路点来触发它。

淡入淡出在Firefox中工作得很好但整个div在淡入淡出和淡入淡出在Mac上的Safari中，div的背景图像不会褪色，只是跳进来。

进行示例检查（模糊部分应淡入） http://www.jasperaarts.com/2013/#work

我以这种方式添加或删除类active_item或inactive_item我触发了CSS转换。

.active_item {

    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    -ms-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;

    -webkit-transition: opacity 1000ms ease 500ms;
    -moz-transition: opacity 1000ms ease 500ms;
    -ms-transition: opacity 1000ms ease 500ms;
    -o-transition: opacity 1000ms ease 500ms;
    transition: opacity 1000ms ease 500ms;
}
.inactive_item {

    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}

我尝试的替代方案是Jquery fadeIn和fadeOut或Jquery中的Animate css都显示了simliar结果。

Answer 1

感谢Godwin，我已将其缩小为与Isotope.js脚本和Parallax css的兼容性问题。

CSS3不透明度过渡，铬不衰落背景图像

1 个答案: