How to disable CSS 'transform: translate' feature for Internet Explorer?

Question

I have set up a split animation for the Logo below using clip-path and hover transform features using CSS. However, clip-path is not supported on IE ad Edge. Therefore, I would like to disable the 'transform: translate' when using IE and Edge.

This is what happens on IE (wrong):

This is what should be happening:

I have already tried using -ms-transform: none !important; under the before and after hover classes but this doesn't seem to disable the transform feature when using IE/Edge.

HTML:

<div class="image">

</div>

CSS:

  width:340px;
  height:230px;
  background-image:url(https://i.ibb.co/fDzZ6Sc/Logo.png);
  background-size:0;
  position:relative;
}
.image:before,
.image:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  transition:1s;
}
.image:before {
  clip-path:polygon(0 0, 32% 0 ,32% 19%,  97% 100%, 0 100%);
  -ms-clip-path: none !important;
}

.image:after {
  clip-path:polygon(100% 0,32% 0,32% 19%,97% 100%);
}

.image:hover::before{
   transform:translate(-20px,-5px);
   -ms-transform: none !important;
}

.image:hover::after{
   transform:translate(20px,5px);
  -ms-transform: none !important;
}

The expected result is for IE/Edge to recognise that the feature is set to none and for there to be no animation upon hovering over the Logo.