如何動畫元素而不會丟失邊界半徑？

Question

我在中心部分圖像上有一點動畫，它放大一點，然後恢復到原來的大小。

Code here!

麻煩的是，動畫「覆蓋」的父元素的邊界半徑，即使它已經溢出隱藏就可以了。

任何想法？

Answer 1

這是Webkit中的一個錯誤。 overflow: hidden不會隱藏角落中已轉換元素的溢出。欲瞭解更多信息，請看https://bugs.webkit.org/show_bug.cgi?id=67950。

Answer 2

的問題是你.image類background-color擴展高達的#promo，涵蓋了border-radius通過pane類設置。

你必須設置：

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

，並

background-color: #91bd09; 

在pane類。

看到這個updated fiddle。