CODEWITHSUNDEEP
htmlcssanimationwebkitkeyframe
jenswirf
jenswirf

Reputation: 7337

How to animate an element and not lose border-radius?

I've got a little animation on a center-piece image, it zooms in a bit and then returns to its original size.

Code here!

Trouble is, the animation "overrides" the border radius on the parent element even though it has overflow hidden on it.

Any ideas?

Upvotes: 3

Views: 997

Answers (2)

Tyler Crompton
Tyler Crompton

Reputation: 12672

This is a bug in Webkit. overflow: hidden does not hide a transformed element's overflow on the corners. For more information have a look at https://bugs.webkit.org/show_bug.cgi?id=67950.

Upvotes: 2

Asif
Asif

Reputation: 5038

The problem is background-color of your .image class expands upto the #promo and covers up the border-radius set by pane class.

You have to set:

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

and,

background-color: #91bd09;

in your pane class.

See this updated fiddle.

Upvotes: 0

Related Questions