html - 要素をアニメーション化して境界半径を失わないようにする方法は?

Question

センターピースの画像に小さなアニメーションがあり、少しズームインしてから元のサイズに戻ります。

コードはこちら！

問題は、オーバーフローが隠されているにもかかわらず、アニメーションが親要素の境界線の半径を「上書き」することです。

何か案は？

Answer 1

これは Webkit のバグです。overflow: hidden角の変換された要素のオーバーフローを隠しません。詳細については、https://bugs.webkit.org/show_bug.cgi?id=67950をご覧ください。

Answer 2

問題はbackground-color、.imageクラスが まで拡張され、クラスごとにセットが#promoカバーされることです。border-radiuspane

以下を設定する必要があります。

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

と、

background-color: #91bd09;

あなたのpaneクラスで。

この更新された fiddleを参照してください。