CSS3动画兼容性问题，如何解决？

自己做的网站，遇到兼容性问题。
在如图的块中，鼠标经过图片的时候会呈现出阴影，实现原理是两张图片替换，鼠标滑过时上面的图片透明度变为0，该效果有一个渐变的动画。
但是在chrome浏览器没问题，在safari上查看时却没有那样的动画，而是直接就变了，百度浏览器也有同样的问题，我加了-webkit—前缀，没效果……
请问如何解决？
查看

css

阅读 9.1k

3 个回答

得票最新

golden_freeman_china

1.8k1211

发布于
2016-03-01

#block251 .col-md-4 img {
    opacity: 1;
    transform: translateZ(0);
    transition: opacity 0.3s ease 0s;
}
#block251 .col-md-4 img:hover {
    display: block;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 0.8s ease 0s;
}

新一点(5，6个月之前)的浏览器，webkit内核就大部分不用加私有-webkit-头了；