Shopify custom animation css not working on ios device only but it works on web and android devices.
my shopify code :
{{ "MyLandAnimation.css" | asset_url | stylesheet_tag }}
<div class="myContainer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
<defs>
<g id="path-1">
<path d="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306z" class="hair hair-main"></path>
</g>
<g id="path-2">
<path d="M0 12s-12.8 3-13.9-12c0 0 14.2-1.8 13.9 12z" class="leaf-2" />
<path d="M0 12s-12.8 3-13.9-12c0 0 3.9 2.9 7 5.6a71.5 71.5 0 0 1 6.9 6.4z" class="leaf-1" />
</g>
<g id="path-3">
<path d="M24 12s-5.3 9.3-14.8 1.5c0 0 6.8-9.4 14.8-1.5z" class="leaf-4" />
<path d="M24 12s-5.3 9.3-14.8 1.5c0 0 3.8-.7 7.2-1a57.3 57.3 0 0 1 7.6-.5z" class="leaf-3" />
</g>
</defs>
<use xlink:href="#path-1" x="0" y="0" />
<g transform="translate(300, 0) scale(-1, 1) translate(-300, 0)">
<use xlink:href="#path-1" x="0" y="0" />
</g>
<g transform="translate(195, 233) scale(-1,1) translate(-195, -233)">
<g>
<use href="#path-2" x="195" y="235" />
<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" />
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="6,185, 233" dur=".75s" begin="anim1.end" />
</g>
</g>
<g transform="translate(195, 233) scale(-1,-1) translate(-195, -233)">
<g>
<use href="#path-2" x="195" y="233" />
<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end" />
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="2,185, 233" dur=".75s" begin="anim1.end" />
</g>
</g>
<g>
<use href="#path-2" x="410" y="235" />
<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,400, 235" to="-12,400, 235" dur=".75s" begin="0s;anim2.end" />
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 235" to="2,400, 235" dur=".75s" begin="anim1.end" />
</g>
<g transform="translate(410, 233) scale(1,-1) translate(-410, -233)">
<g>
<use href="#path-2" x="410" y="233" />
<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,400, 233" to="-12,400, 233" dur=".75s" begin="0s;anim2.end" />
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 233" to="6,400, 233" dur=".75s" begin="anim1.end" />
</g>
</g>
<use xlink:href="#path-3" x="174" y="222" />
<use xlink:href="#path-3" x="398" y="222" />
<path class="text" fill-rule="evenodd" transform="translate(220, 215)" d="M 0 0.361 L 0 30.871 L 9.855 30.871 L 9.855 30.016 C 9.855 18.946 1.98 24.526 1.17 4.006 C 2.056 6.842 2.288 7.409 3.542 11.639 A 493.23 493.23 0 0 1 3.6 11.836 A 8.942 8.942 0 0 0 4.473 13.833 C 7.457 18.82 14.04 17.572 14.04 24.391 L 15.165 24.391 C 15.165 16.786 23.355 19.216 25.605 11.836 C 26.865 7.516 27.09 6.886 27.945 4.141 A 65.034 65.034 0 0 1 27.695 7.873 C 26.135 23.857 19.35 19.681 19.35 30.016 L 19.35 30.871 L 29.205 30.871 L 29.205 0.361 L 28.035 0.361 A 34.377 34.377 0 0 0 24.001 0.569 C 20.661 0.999 18.298 2.315 16.98 6.369 A 15.409 15.409 0 0 0 16.875 6.706 C 15.66 10.846 15.795 10.171 14.805 13.726 C 14.715 14.041 14.625 14.356 14.58 14.671 L 14.355 13.726 C 13.41 10.171 13.545 10.846 12.285 6.706 C 10.583 0.935 6.889 0.411 1.415 0.365 A 167.965 167.965 0 0 0 0 0.361 Z M 135.63 6.526 L 134.46 6.526 A 35.99 35.99 0 0 0 134.346 7.769 C 133.897 13.889 135.514 16.085 138.723 16.315 A 8.367 8.367 0 0 0 139.32 16.336 A 4.994 4.994 0 0 0 140.784 16.135 C 144.313 15.059 143.658 9.941 145.231 8.15 A 1.741 1.741 0 0 1 146.07 7.606 A 4.518 4.518 0 0 1 146.736 7.465 C 149.117 7.161 150.212 9.442 149.22 16.921 A 26.765 26.765 0 0 0 147.152 16.77 A 47.213 47.213 0 0 0 145.395 16.741 A 32.262 32.262 0 0 0 141.156 16.994 C 138.166 17.393 135.999 18.257 134.635 19.565 A 5.736 5.736 0 0 0 132.885 23.896 C 132.885 28.254 136.108 30.742 143.152 31.024 A 34.774 34.774 0 0 0 144.54 31.051 C 148.32 31.051 149.49 29.836 149.76 28.126 A 6.217 6.217 0 0 0 151.367 29.87 C 155.008 32.515 160.871 30.217 163.973 27.053 A 10.155 10.155 0 0 0 164.835 26.056 L 164.16 25.336 A 6.91 6.91 0 0 1 163.822 25.652 C 162.611 26.711 161.388 26.967 160.365 26.287 A 2.751 2.751 0 0 1 160.065 26.056 A 3.985 3.985 0 0 1 158.755 23.415 C 158.582 22.068 158.795 20.403 159.12 18.406 C 160.017 12.806 157.622 8.38 152.687 6.818 A 14.008 14.008 0 0 0 148.455 6.211 C 143.546 6.211 140.743 9.126 138.048 9.426 A 3.955 3.955 0 0 1 137.61 9.451 C 136.27 9.451 135.736 8.424 135.645 7 A 7.425 7.425 0 0 1 135.63 6.526 Z M 66.15 11.161 L 66.87 11.881 A 6.443 6.443 0 0 1 67.397 11.407 C 68.632 10.417 69.902 10.255 70.965 11.161 A 3.985 3.985 0 0 1 72.275 13.801 C 72.448 15.149 72.235 16.813 71.91 18.811 A 14.909 14.909 0 0 0 71.729 20.625 C 71.557 25.335 73.847 28.999 78.22 30.415 A 14.117 14.117 0 0 0 82.575 31.051 C 93.093 31.051 97.615 13.463 95.313 7.484 A 4.417 4.417 0 0 0 94.815 6.526 L 81.765 6.526 A 8.964 8.964 0 0 1 84.476 8.909 C 88.601 14.114 90.358 24.562 87.09 28.224 A 3.809 3.809 0 0 1 84.375 29.521 A 4.05 4.05 0 0 1 84.112 29.53 C 82.198 29.53 80.668 28.013 81.872 19.576 A 65.651 65.651 0 0 1 81.945 19.081 C 82.393 16.048 82.735 13.068 81.921 10.606 A 7.012 7.012 0 0 0 80.82 8.506 C 77.338 4.163 70.535 6.646 67.07 10.114 A 10.413 10.413 0 0 0 66.15 11.161 Z M 44.46 6.526 L 44.46 30.871 L 54.315 30.871 L 54.225 11.071 A 7.005 7.005 0 0 1 54.295 10.023 C 54.455 8.979 54.903 8.323 55.8 8.461 A 1.718 1.718 0 0 1 57.031 9.403 C 58.274 11.507 58.206 16.336 62.91 16.336 C 66.565 16.336 68.658 14.199 68.445 7.493 A 34.164 34.164 0 0 0 68.4 6.526 L 67.23 6.526 C 67.23 8.085 66.796 9.29 65.52 9.436 A 2.373 2.373 0 0 1 65.25 9.451 A 1.888 1.888 0 0 1 64.483 9.296 C 62.998 8.651 62.53 6.211 57.96 6.211 A 5.975 5.975 0 0 0 56.408 6.408 C 53.95 7.064 52.693 9.159 50.43 9.768 A 4.815 4.815 0 0 1 50.04 9.856 C 47.831 10.257 46.017 10.05 45.652 7.538 A 7.059 7.059 0 0 1 45.585 6.526 L 44.46 6.526 Z M 106.02 19.891 C 122.22 15.931 121.86 6.211 109.98 6.211 A 15.626 15.626 0 0 0 103.589 7.486 C 99.198 9.445 96.525 13.515 96.525 18.676 A 12.482 12.482 0 0 0 98.658 25.877 C 100.286 28.226 102.777 29.918 105.89 30.7 A 16.776 16.776 0 0 0 109.98 31.186 C 116.312 31.186 119.211 29.219 122.641 25.464 A 60.933 60.933 0 0 0 123.48 24.526 A 22.275 22.275 0 0 1 123.122 24.153 C 122.965 23.989 122.802 23.822 122.625 23.671 A 15.953 15.953 0 0 1 120.397 25.734 C 116.143 28.925 111.677 28.037 107.444 22.086 A 28.245 28.245 0 0 1 106.605 20.836 A 8.787 8.787 0 0 1 106.156 20.127 A 40.578 40.578 0 0 1 106.02 19.891 Z M 121.32 0.361 L 121.32 30.871 L 131.175 30.871 L 131.175 7.606 A 4.191 4.191 0 0 0 131.015 6.393 C 129.83 2.464 122.445 6.114 122.445 0.361 L 121.32 0.361 Z M 31.905 30.871 L 41.76 30.871 L 41.76 15.391 A 4.059 4.059 0 0 0 41.595 14.178 C 41.047 12.424 39.224 12.181 37.406 11.938 A 44.129 44.129 0 0 1 36.675 11.836 C 34.11 11.431 32.625 10.666 31.905 9.721 L 31.905 30.871 Z M 42.615 5.401 C 42.615 2.206 40.32 0.001 36.855 0.001 A 6.683 6.683 0 0 0 34.139 0.538 C 32.303 1.35 31.17 3.029 31.099 5.184 A 6.57 6.57 0 0 0 31.095 5.401 A 5.336 5.336 0 0 0 32.041 8.532 C 32.732 9.505 33.774 10.209 35.075 10.541 A 7.187 7.187 0 0 0 36.855 10.756 A 6.717 6.717 0 0 0 39.539 10.233 C 41.448 9.405 42.606 7.654 42.615 5.427 A 6.457 6.457 0 0 0 42.615 5.401 Z M 149.085 17.956 L 149.085 18.136 A 40.201 40.201 0 0 0 148.631 22.085 A 29.08 29.08 0 0 0 148.59 22.996 C 148.59 25.437 148.875 28.164 148.178 29.085 A 0.81 0.81 0 0 1 147.87 29.341 A 2.365 2.365 0 0 1 146.938 29.588 C 145.495 29.653 143.992 28.265 142.683 25.1 A 21.268 21.268 0 0 1 142.56 24.796 C 141.779 22.871 141.569 21.171 141.939 19.953 A 2.571 2.571 0 0 1 143.28 18.316 A 4.424 4.424 0 0 1 144.26 17.978 C 145.274 17.744 146.58 17.713 147.986 17.834 A 22.952 22.952 0 0 1 149.085 17.956 Z M 110.327 12.283 A 6.228 6.228 0 0 0 109.845 11.341 C 107.955 8.281 105.255 7.471 103.545 8.551 A 2.454 2.454 0 0 0 102.565 9.738 C 101.982 11.225 102.615 13.53 104.045 16.394 A 44.538 44.538 0 0 0 105.435 18.946 A 8.263 8.263 0 0 0 108.577 17.624 C 110.303 16.391 111.221 14.494 110.327 12.283 Z" />
<path d="M290.1 137.5s2.5 12.9-.5 22.4a1.7 1.7 0 0 0 .6 1.9 14 14 0 0 0 16.7 0v-.1a1.6 1.6 0 0 0 .7-1.7 47.4 47.4 0 0 1 0-22.5l-10.3-5.8z" class="face" />
<path d="M290.7 138.5a21 21 0 0 0 19.3-1c20.3-13 23-36.6 21.7-48.8-1.7-15.3-5.9-18-11.7-25.2s-14.1-12.3-23-12.9a12.2 12.2 0 0 0-7.9 1.7c-1 .7-1.7 2-2.8 2.7-26.7 14-31.5 65 4.4 83.5z" class="face" />
<path d="M333.1 93.8a100.2 100.2 0 0 1-.5 9.7c-4.5-5.9-1.5-11.7-4.9-25.3a18.2 18.2 0 0 0-9.6-12.4c-4.6-2.6-9.9-4-14-7.1a21 21 0 0 1-2.3-2 13.2 13.2 0 0 1-3.2-5 9.2 9.2 0 0 1-.5-2.3h4.3a23.6 23.6 0 0 1 14.8 5.5 35 35 0 0 1 6.9 7.5l.5.7c5.2 8 8.5 18.8 8.5 30.7z" class="hair" />
<path d="M299.5 48.8a8.3 8.3 0 0 1-.5 2.3 12.7 12.7 0 0 1-2.7 4.3 22 22 0 0 1-2.9 2.5 36.7 36.7 0 0 1-7.8 4.1c-6.6 2.8-13.5 5.4-15.9 15-3.3 13.3-.3 19-4.9 24.7l-.2-2q-.3-3.6-.3-7.3a53.5 53.5 0 0 1 10.5-32.7 31.3 31.3 0 0 1 9-7.7 23.3 23.3 0 0 1 11.5-3.1z" class="hair" />
<g class="heart">
<path d="M402.5 131s-13.6-20-2.6-23.1c6-1.7 8.9 7.9 8.9 7.9s8.1-5.5 11.8-.1c6.5 9.5-18 15.3-18 15.3z" />
<path d="M401.6 95.7s-9.6-8.9-4.2-11.8c3-1.6 5.7 3 5.7 3s3.6-3.8 6.2-1.4c4.5 4.2-7.7 10.2-7.7 10.2z" />
<path d="M426.3 106.1s-3.4-6.2 0-6.8c1.7-.3 2.3 2.6 2.3 2.6s2.5-1.4 3.4.3c1.6 3-5.7 4-5.7 4z" />
<path d="M196 131s13.7-20 2.7-23.1c-6-1.7-9 7.9-9 7.9s-8-5.5-11.8-.1C171.4 125.2 196 131 196 131z" />
<path d="M197 95.7s9.5-8.9 4.1-11.8c-3-1.6-5.6 3-5.6 3s-3.6-3.8-6.2-1.4c-4.6 4.2 7.6 10.2 7.6 10.2z" />
<path d="M172.2 106.1s3.4-6.2.1-6.8c-1.8-.3-2.4 2.6-2.4 2.6s-2.5-1.4-3.4.3c-1.6 3 5.7 4 5.7 4z" />
</g>
<path d="M262 53.2a.3.3 0 0 1-.2 0 .4.4 0 0 1 0-.6 54.3 54.3 0 0 1 10.4-7.6c6-3.4 15.4-7.4 26.6-7a55.7 55.7 0 0 1 25.9 7.2 43.2 43.2 0 0 1 9 6.7.4.4 0 0 1 0 .6.4.4 0 0 1-.5 0 43 43 0 0 0-9-6.7 55 55 0 0 0-25.5-7.1c-11-.4-20.2 3.5-26.1 7a54 54 0 0 0-10.3 7.4.4.4 0 0 1-.2.1z" class="leaf-3" />
<path d="M300.3 38.2c.1-1.8-.1-5.3-3.6-6.6a2 2 0 0 0-2.7 2c0 1.8.9 4.2 4.3 5.4-1.8-.2-4.7.1-6.2 3a2 2 0 0 0 1.8 3 5.6 5.6 0 0 0 5.5-3.6 5.6 5.6 0 0 0 3 5.7 2 2 0 0 0 3-1.8 5.7 5.7 0 0 0-3.9-5.7c4 .3 5.6-1.7 6.4-3.5a2 2 0 0 0-1.8-2.7c-3.7 0-5.2 3-5.8 4.8z" class="flower-1" transform-origin="300 38" transform="scale(1.5)" />
<path d="M300.8 38.2c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-.9 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.7 5.7 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.4.2 5.6 5.6 0 0 0-.3-7c3.2 2.4 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-2" transform-origin="300 38" transform="scale(1.5)" />
<path d="M335.4 48.8c1-1.5 2.7-4.5.4-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.5 4.1.8 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.5 0 5.6 5.6 0 0 0-.4 6.4 2 2 0 0 0 3.4.1 5.6 5.6 0 0 0-.3-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6.1-.2-7.5 1z" class="flower-1" transform-origin="335 48" transform="scale(1.35)" />
<path d="M334.8 48.5c0-1.9-.6-5.3-4.2-6.3a2 2 0 0 0-2.5 2.2c.2 1.8 1.2 4.2 4.8 5-1.9 0-4.7.6-6 3.7a2 2 0 0 0 2 2.7 5.6 5.6 0 0 0 5.3-4 5.6 5.6 0 0 0 3.5 5.4 2 2 0 0 0 2.8-2 5.7 5.7 0 0 0-4.4-5.3c4-.1 5.4-2.3 6-4.1a2 2 0 0 0-2-2.6c-3.7.3-5 3.5-5.3 5.3z" class="flower-2" transform-origin="335 48" transform="scale(1.35)" />
<path d="M265.8 48.8c1.1-1.5 2.7-4.5.5-7.5a2 2 0 0 0-3.3.2c-1 1.6-1.6 4.1.7 7-1.5-1.2-4-2.5-6.9-.8a2 2 0 0 0 0 3.4 5.6 5.6 0 0 0 6.6 0 5.6 5.6 0 0 0-.5 6.4 2 2 0 0 0 3.5.1 5.6 5.6 0 0 0-.4-6.9c3.2 2.3 5.7 1.5 7.3.4a2 2 0 0 0 0-3.3c-3.2-2-6-.2-7.5 1z" class="flower-1" transform-origin="265 48" transform="scale(1.35)" />
<path d="M266 49.6c2-.4 5.2-1.5 5.6-5.2a2 2 0 0 0-2.6-2.1c-1.8.5-3.9 2-4.2 5.6-.3-1.9-1.3-4.6-4.5-5.3A2 2 0 0 0 258 45a5.6 5.6 0 0 0 4.9 4.5 5.6 5.6 0 0 0-4.8 4.4 2 2 0 0 0 2.4 2.4 5.7 5.7 0 0 0 4.6-5.2c.7 3.8 3.1 5 5 5.3a2 2 0 0 0 2.3-2.5c-1-3.6-4.4-4.3-6.2-4.3z" class="flower-2" transform-origin="265 48" transform="scale(1.35)" />
<g>
<path d="M340 69.1s2-12.3 15.6-7.8c0 0-3.6 13.1-15.6 7.8z" class="leaf-2" />
<path d="M340 69.1s2-12.3 15.6-7.8c0 0-4 2.4-7.5 4.1a70.2 70.2 0 0 1-8.1 3.7z" class="leaf-1" />
</g>
<g>
<path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-7.3 3-9-4.3z" class="leaf-4" />
<path d="M340.2 71.9s6.4-3.5 9.1 4.3c0 0-2.5-1-4.5-2a41.4 41.4 0 0 1-4.6-2.3z" class="leaf-3" />
</g>
<g>
<path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 3.6 13.1 15.6 7.8z" class="leaf-2" />
<path d="M259.8 69.1s-2-12.3-15.6-7.8c0 0 4 2.4 7.5 4.1a70.3 70.3 0 0 0 8.1 3.7z" class="leaf-1" />
</g>
<g>
<path d="M259.6 71.9s-6.3-3.5-9 4.3c0 0 7.2 3 9-4.3z" class="leaf-4" />
<path d="M259.6 71.9s-6.3-3.5-9 4.3l4.5-2a39.6 39.6 0 0 0 4.5-2.3z" class="leaf-3" />
</g>
</svg>
</div> {% schema %} { "name": "My Land Animation", "settings": [], "presets": [ { "name": "My Land Animation" } ] } {% endschema %}
And here is my css :
@keyframes hair-flow {
from {
d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306");
}
to {
d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306");
}
}
@-webkit-keyframes hair-flow {
from {
d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306");
}
to {
d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306");
}
}
@-o-keyframes hair-flow {
from {
d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306");
}
to {
d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306");
}
}
@-moz-keyframes hair-flow {
from {
d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306");
}
to {
d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306");
}
}
.hair-main {
animation:hair-flow 0.75s infinite alternate ease-in-out;
-webkit-animation:hair-flow 0.75s infinite alternate ease-in-out;
-o-animation:hair-flow 0.75s infinite alternate ease-in-out;
-moz-animation:hair-flow 0.75s infinite alternate ease-in-out;
}
Hello everyone,
I’m currently facing an issue with CSS animations not working as expected on iOS devices. Despite implementing standard CSS animations using keyframes, the animations either do not trigger or do not play smoothly on iPhones and iPads.
Here are some details about my setup:
Animation Type: I’m using CSS keyframes to animate svg hair.
Browsers Tested: I’ve tested on Safari on iOS.
CSS Properties Used: explained in code.
Expected Behavior: The animations should play on IOS devices like web and android devices.
Current Behavior: On iOS, the animations fail to trigger and the hair not waving up and down.
I suspect this might be related to iOS's handling of animations or specific CSS properties. Has anyone else encountered this issue, and do you have any suggestions for troubleshooting or solutions? Any help would be greatly appreciated!
I try to use -webkit- but still not working ... by the way i focus only on animation of "hair"
Thank you!
To this date (2024) webkit (e.g Apple Safari, web/Epiphany, Midori) can't change the presentation attribute d via CSS.
As a workaround you could use a SMIL animation instead
@keyframes hair-flow {
from {
d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306");
}
to {
d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306");
}
}
.hair-main2 {
fill: red;
animation: hair-flow 0.75s infinite alternate ease-in-out;
}<h3>SVG SMIL animation</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
<defs>
<g id="path-1">
<path d="" class="hair hair-main">
<animate
attributeName="d"
attributeType="XML"
values="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306;
M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306;
M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306"
dur="1.5s"
repeatCount="indefinite"
keyTimes="0; 0.5; 1"
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
calcMode="spline"
fill="freeze" />
</path>
</g>
</defs>
<use href="#path-1" x="0" y="0" />
<use href="#path-1" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" />
</svg>
<h3>CSS animation (not working in webkit)</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
<defs>
<path id="path" d="" class="hair hair-main2" />
</defs>
<use href="#path" x="0" y="0" />
<use href="#path" x="0" y="0" transform="translate(300, 0) scale(-1, 1) translate(-300, 0)" />
</svg>You can nest an <animate> element inside the <path> (or reference it via href atribute.
d (path data) values. We need to duplicate the first value as SMIL doesn't have a native way to play an animation back and forth on each iteration as CSS alternate would dorepeatCount="indefinite" makes the animation loop infinitelykeyTimes="0; 0.5; 1" specifies the timings of the different animation "keyframes"keySplines="0.42 0 0.58 1; 0.42 0 0.58 1" calcMode="spline" emulate an ease-in-out easing behaviour