Animating CSS shapes

[malcolmandrewd]

Hi All,

I have created a logo using 10 triangles of different colours. I thought it would be pretty cool to have the logo to start off as one triangle and gradually “unfold” into the finished logo design. I’ve tried to play about with 3d css transforms, but really cant get my head around it.

Appreciate anyones help on this.

Andrew

[Paulie_D]

Show us what you have, ideally, in Codepen.io.

However, I would really say that using transforms and keyframes is making a rod for your own back.

Javascript / Jquery would be much better option.

[malcolmandrewd]

I have found this:http://www.premiumbeat.com/blog/video-tutorial-unfolding-animation-in-adobe-after-effects/, which is similar to what I am thinking.

But again, I would like to have it “coded” instead of using an animated gif or flash.

[Paulie_D]

Show us what you have, ideally, in Codepen.io.

All you have provided is a a demo of something similar in a completely different environment (video).

Unfortunately, we’re not a ‘code it for you’ kind of site…we’re a ‘help you over the hard bits’ kind of site.

Try experimenting with transforms and animations, Codepen is the perfect environment for this and go from there.

[Author]

Posts