CODEWITHSUNDEEP
htmlcssanimationcss-animations
LukeD1uk
LukeD1uk

Reputation: 242

Why is my CSS animation breaking my overflow?

I've spent soo long trying to figure this out, and I cant see any reason why this is causing this error. You can see, that the sun and land are visible outside of my scene div which has an overflow of hidden. Now if you go to the classes below and comment out that animation it will appear correctly. 

.wing1 
.wing2

Why on earth is it acting this way? Is it because I have animation inside a div I am already animating?

.bird *is animated*
    .wing1 *is animated*
    .wing2 *is animated*

Pen: http://codepen.io/LukeD1uk/pen/LVWXmB

Any insight would be great.

Upvotes: 0

Views: 130

Answers (1)

divy3993
divy3993

Reputation: 5810

CSS in your scene class

 position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */

Upvotes: 1

Related Questions