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

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

---

不会吧，没理由safiri不支持啊

---

可能是你的浏览器版本不支持。看看这个网址http://www.css88.com/book/css/properties/transition/transition.htm

---

#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-头了；