Jump in animation

HTML & CSS
1

Hello:

I’m reworking this animation changing positions of relative and absolute. It works fine. But now there’s a little jump in the demo when the squares become triangles. But I can’t see where to fix it. Thanks!.

http://codepen.io/CarolinaSawney/pen/epmrNw

2

Are you referring to the vertical jump between the demos? That’s due to the triangles starting just under the .box and since you hide one / start one, you dont see it until the triangles are 1 opacity (showing) and begin. You need to lower the top: value on .triangles{}

Since they technically are stacking one under another right now.

Assuming that’s what you meant :slight_smile: .

1 Like
3

This animation has a lot more challenges. It doesn’t run at all in Opera, Safari or IE9. That is the problem with relying on CSS for these effects. Surely you want everyone to see the show?
Link to original CodePen

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.