Animation safari中的css3边界半径动画转换不工作

尝试在Safari中对图像的边界半径进行css3轻松过渡

它只是闪烁到悬停状态，而不是平滑过渡。 非常感谢您的帮助

代码：

.全部a：悬停img{
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；
过滤器：α（不透明度=100）；
-moz不透明度：1；
-khtml不透明度：1；
不透明度：1；
-webkit过滤器：灰度（0%）；
}
.都是img{
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
宽度：50%；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；
过滤器：α（不透明度=90）；
-moz不透明度：0.9；
-khtml不透明度：0.9；
不透明度：0.9；
}
.都是img{
-moz过渡：全部.3s轻松；
-webkit过渡：所有.3s轻松；
-o-过渡：全部3秒轻松；
过渡：全部。3秒轻松；
}
.都是img{
-webkit过滤器：灰度（100%）；
过渡：边界半径。3s容易；
-moz过渡：-moz边界半径.3s缓和，边界半径.3s缓和；
-webkit过渡：-webkit边界半径。3s缓和，边界半径。3s缓和；
}

链接至网站：

---

这是一个简单的修复，Safari不支持从像素到百分比的转换。如果您将悬停样式从50%更改为100px，您将看到过渡将顺利进行

.all a:hover img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px
    border-radius: 100px;

}

---

您可能希望将它们设置为图像高度和宽度的两倍，以确保它们在悬停时始终为四舍五入。

这是一个简单的解决方案，Safari不支持从像素到百分比的转换。如果您将悬停样式从50%更改为100px，您将看到过渡将顺利进行

.all a:hover img {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px
    border-radius: 100px;

}

---

您可能希望将它们设置为图像高度和宽度的两倍的任何值，以确保它们在悬停时始终是四舍五入的。

以下内容应用于父元素，并应用了边框半径，以便将webkit踢回直线：

-webkit-mask-image: -webkit-radial-gradient(white, black);

另一个选项是将元素包装在两个边界半径父元素中

---

对我来说，这似乎有点骇人听闻，但比“双包裹”选项要好得多–有兴趣听到其他解决方案。

以下内容应用于父元素，并应用了边框半径，以将webkit重新对齐：

-webkit-mask-image: -webkit-radial-gradient(white, black);

另一个选项是将元素包装在两个边界半径父元素中

---

对我来说，这似乎有点骇人听闻，但远比“双包裹”选项好——有兴趣听听其他解决方案。

这一问题何时才能解决。我对苹果越来越不耐烦了。当你在应用边界半径的元素中设置元素动画时，这不起作用。在过渡期间，方形角会返回。这将在何时修复。我对苹果越来越不耐烦了。当你在应用边界半径的元素中设置元素动画时，这不起作用。在过渡过程中，方形拐角将返回。