Applying a css transformation breaks image animations?

Site URL: https://collie-chicory-w59b.squarespace.com/

Password: equip

I am attempting to add a rotation to images on my site - 

This works using 

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img {
    transform: rotate(8deg);
}

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img {
    transform: rotate(-8deg);
}

I had to add .animation-loaded to the figure or else the image doesn't show at all (see below).

However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load).

I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently.


What can I do to fix this?

On 9/17/2021 at 10:37 PM, Hailwood said:

Site URL: https://collie-chicory-w59b.squarespace.com/

Password: equip

I am attempting to add a rotation to images on my site - 

This works using 

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(even) figure.animation-loaded img {
    transform: rotate(8deg);
}

section[data-section-id="614440885b55b37b1124f3c9"] .sqs-block.image-block:nth-child(odd) figure.animation-loaded img {
    transform: rotate(-8deg);
}

I had to add .animation-loaded to the figure or else the image doesn't show at all (see below).

However there is a frustrating issue where if the image in question is visible on the page at load (e.g. scroll part way down and then refresh) then the image doesn't show. (In the screenshot below the page was scrolled enough that the "Before School Care" section was in the viewport, the "After School Care" section was not in the viewport at page load).

I I don't have the animation enabled on the section, or if I don't have the transform CSS then the images show consistently.


What can I do to fix this?

Could you remove the selector .figure.animation-loaded img before we can check for the issue?