The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Opacity/Scale/Rotate animation with @keyframes not working

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #174864

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

    (See 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]


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

    A example and a link here are more than adequate.

    My first thought though is…

    Don’t do page layout with tables.


    This is what I have managed so far.
    However, I would like the previous image in the sequence to show through underneath the animation.


    Looks like you go it

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.