html - 如何为元素设置动画而不丢失边框半径？

Question

我在中心图像上有一个小动画，它放大一点，然后恢复到原来的大小。

代码在这里！

麻烦的是，动画“覆盖”了父元素上的边框半径，即使它上面隐藏了溢出。

有任何想法吗？

Answer 1

这是 Webkit 中的一个错误。overflow: hidden不会在角落隐藏转换元素的溢出。有关更多信息，请查看https://bugs.webkit.org/show_bug.cgi?id=67950。

Answer 2

问题是background-color您的.image班级扩展到#promo并按班级覆盖了border-radius集合pane。

你必须设置：

background-color: transparent; //in image class,

和，

background-color: #91bd09;

在你的pane课上。

看到这个更新的小提琴。