Why CSS animation (rotate) does not work in iOS 15.4

Giordanidis — Fri, 29 Apr 2022 17:58:34 +0000

I have an SVG icon and I have applied some CSS animation (rotation) to it, using inline CSS inside the SVG file (at the end of the post you can see my code in CodePen).

My problem is that, although the animation works as expected in desktop and in my Android mobile phone, it doesn't work in some iPhones.

For example, I saw it doesn't work in iPhone 11 if it's updated to iOS 15.4 but it works if it's in version 15.3. Also I tried with an iPad which was in 15.3 and it worked, and after the update to 15.4 it stopped working.

Am I missing anything here, or it's just a bug of iOS 15.4?

I appreciate your help!

Thanks!

EDIT: I've just realized that it works as expected when I visit directly the link to where I have uploaded the SVG image. I mean, If I have uploaded the SVG image to example.com/path-to-icon.svg I can see it rotating as expected.

However, when I am trying to use it like an image, it does not work. I mean, If I use <img src="example.com/path-to-icon.svg"> it does not work...

How to combine animation and mask effect using a specific SVG image

Giordanidis — Sun, 17 Apr 2022 12:40:36 +0000

I have an image with an overlay background color which has some opacity, and I want to create a "hole" effect on this image.

I want the "hole" to be a specific SVG image that I have, and I want this image to rotate.

I have created 2 examples in Codepen to help you understand what I want:

1) Hole effect without animation: https://codepen.io/Giordanidis/pen/qBpQGVd

2) Hole effect with animation (but without the "hole"): https://codepen.io/Giordanidis/pen/OJzaYZz

In the 1st example, you can see the background image, the background (black) color which has a 75% opacity, and also the SVG image (the heart icon) which acts like a "hole" and you can actually see "behind" the black color. What is missing here is the animation part that you can see in the 2nd example.

In the 2nd example, you can also see the background image and the background color, and also the SVG image, without the "hole" effect, but with the animation (rotation) I want.

My problem is that I cannot combine these two. As already mentioned I just want to somehow add the rotating animation (which you can see in the 2nd example) to the 1st example.

Is there any way I can do it with CSS or JS?

I appreciate your help! Thanks in advance!

DEV Community: Giordanidis

Why CSS animation (rotate) does not work in iOS 15.4

How to combine animation and mask effect using a specific SVG image