html - CSS animation looks wrong/broken in some places on iOS devices only?

Solution:

Some CSS properties are supported with vendor-specific syntax so you need to use always these syntaxes to make cross-browser compatibility-webkit-css-property-name for apple devices-moz-css-property-name for some mozilla devices

Read more about vendor prefixes (here](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix (https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix))

@keyframes anim-flipX {
  0% {
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform:rotateX(90deg);
  }
  50% {
    transform: rotateX(720deg);
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform:rotateX(720deg);
  }
  100% {
    transform: rotateX(720deg);
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform:rotateX(720deg);
  }
}
Copy code

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.