Css animation in ios devices

I added this custom html, css and js in my website. It’s an hamburger menu with animation which i have to insert in my website.
The transformation works in android devices, not in ios ones.
What can i do to fix it?
I tried to insert webkit prefix in each part of css part but nothing happens.

Html:

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 20" id="icon">
    <path id="mypath" d="M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21" fill="none" stroke="white" stroke-width="1" />
</svg>

CSS:

  .shape1 {
  -webkit-animation: webkit-apertura 800ms ease-in-out forwards;
    animation: apertura 800ms ease-in-out forwards;
  }

  .shape2 {
       -webkit-animation: webkit-chiusura 800ms ease-in-out forwards;
       animation: chiusura 800ms ease-in-out forwards;
  }
  
  @-webkit-keyframes webkit-apertura {
    0% {
      d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
    }
    50% {
      d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
    }
    100% {
      d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
    }
}

  @keyframes apertura {
    0% {
      d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
    }
    50% {
      d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
    }
    100% {
      d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
    }
}

@keyframes chiusura {
    0% {
      d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
    }
    50% {
      d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
    }
    100% {
      d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
    }
}

@-webkit-keyframes webkit-chiusura {
    0% {
      d: path("M 16 11 L 6 1 M 26 1 L 16 11 M 16 11 L 16 11 M 16 11 L 16 11 M 16 11 L 6 21 M 26 21 L 16 11");
    }
    50% {
      d: path("M 1 11 L 16 1 M 16 1 L 31 11 M 1 11 L 16 11 M 16 11 L 31 11 M 1 11 L 16 21 M 16 21 L 31 11");
    }
    100% {
      d: path("M 1 1 L 16 1 M 16 1 L 31 1 M 1 11 L 16 11 M 16 11 L 31 11 M 1 21 L 16 21 M 16 21 L 31 21");
    }
}

Javascript:

var state = 0;
var icona = document.getElementById("icon");
var path = document.getElementById("mypath");

icona.addEventListener("click", function(event){
 event.preventDefault();
    
    if(state==0){
        path.classList.remove('shape2');
        path.classList.add('shape1');
        state = 1;
        console.log("shape1");
    } else{
        path.classList.remove('shape1');
        path.classList.add('shape2');
        state = 0;
        console.log("shape2");
    }
});


icona.addEventListener("touchstart", function(event){
 event.preventDefault();
    
    if(state==0){
        path.classList.remove('shape2');
        path.classList.add('shape1');
        state = 1;
        console.log("shape1");
    } else{
        path.classList.remove('shape1');
        path.classList.add('shape2');
        state = 0;
        console.log("shape2");
    }
});