如何为元素设置动画而不丢失border-radius？

Question

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

Code here!

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

有什么想法吗？

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课程中。

请参阅此updated fiddle。