Opacity/Scale/Rotate animation with @keyframes not working

[Historical Forums User]

I am trying to create a banner for a client’s site.

(See http://codepen.io/anon/pen/tKnzh for example).

The client’s concept is for the central image(s) to be split into a 2×4 grid of smaller images (Parts 1×1 through 2×4).

Each part should start off transparent, rotated -90 degrees and be scaled to half size then fade in whilst rotating and scaling back to normal to reveal the larger image. This should repeat for each image in the slideshow.

I am trying to do this using @keyframes and -transform: opacity rotate scale; without any success.

[MOD EDIT: Codedump Removed]

[Paulie_D]

Please no Codedumps…they are very hard to read and usually incomplete.

A Codepen.io example and a link here are more than adequate.

My first thought though is…

Don’t do page layout with tables.

[Historical Forums User]

This is what I have managed so far.
http://codepen.io/7raindesigns/details/gyzck
However, I would like the previous image in the sequence to show through underneath the animation.

[Historical Forums User]

http://codepen.io/7raindesigns/full/gyzck/

[Paulie_D]

Looks like you go it

[Author]

Posts