CSS animation 不适用于 Z1BDF605991920DB11ZCBDF8508204CEB4 中的 SVG 图像

Question

I have one SVG image and I have added animation on it using CSS it works fine in Chrome and Mozilla, and also on Android but not working on iOS both Chrome and Safari.

The problem is that I can see the image displayed but the animation spinning is not working.

I have the following animation applied to my simple SVG:

<img class="img-sth"src="/img/image.svg">

The css code:

.img-sth {
  position: absolute;
  height: 80px;
  top: -3px;
  left: 16px;
  -webkit-animation:spin-faster 4s linear 0.01s infinite;
  -moz-animation:spin-faster 4s linear 0.01s infinite;
  animation:spin-faster 4s linear 0.01s infinite;
}

@-moz-keyframes spin-faster { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin-faster { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Answer 1

Below see snippet where I added the 0% {} to each @keyframes definition. Your code did not work for me on macOS Safari (desktop) either when I initially tested it so I thought it may have been an issue with how the @keyframes animation was defined. See MDN docs for more info .

I used a placeholder image for the demo and tweaked the positioning so it was all in the viewport.

 .img-sth { position: absolute; height: 80px; top: 20px; left: 20px; -webkit-animation:spin-faster 4s linear 0.01s infinite; -moz-animation:spin-faster 4s linear 0.01s infinite; animation:spin-faster 4s linear 0.01s infinite; } @-moz-keyframes spin-faster { 0% {} 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin-faster { 0% {} 100% { -webkit-transform: rotate(360deg); } } @keyframes spin-faster { 0% {} 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

 <img class="img-sth"src="https://via.placeholder.com/80x80">