Cant get reveal key frame animation to work in Safari

Question

This is a snippet of the code I am using, on Chrome it works perfectly, the image is revealed from left to right (I am using it to animate a brushstroke) however when I browse it on safari it simply wont work. I know I most likely something to do with the -webkit code in the wrong place but can't seem to work out where or if this is a limitation of the browser.

.banner-title:before {
    background-image: url(/underline-2.png);
}

.banner-title:before {
    content: "";
    width: 100%;
    height: 6em;
    max-width:500px;
    position: absolute;
    z-index: -1;
    bottom: -20px;
    left:0;
right:0;
margin-left:auto;
margin-right:auto;
    background-repeat: no-repeat;
    background-position:  center;
    -webkit-transform-origin: center;
    transform-origin: left center;
    -webkit-transform: translateZ(-2px);
    transform: translateZ(-2px);
  animation: reveal 2s forwards;
  -webkit-animation: reveal 2s forwards;
}

@keyframes reveal {
  0% {
    clip-path: inset(0% 100% 0% 0%);
    -webkit-clip-path: inset(0% 100% 0% 0%);
  }
  100% {
  clip-path: inset(0% 0% 0% 0%);
  -webkit-clip-path: inset(0% 0% 0% 0%);
  }
}

.banner-title:before {
    background-size: contain;
}