firefox equivalent of this border hover effect

Question

i'm having some trouble to make to make this animated border hover effect work in firefox.

reference: https://mechbull.net/blog-02-3/

when hovering on a project

.project-block_one-image {
  box-sizing: border-box !important; 
  padding-top: 10px;
  padding-right: 10px;
  border-top: 1px solid;
  border-right: 1px solid;
  -webkit-mask: conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0) var(--_i,200%) 0 /200% var(--_i,8px) border-box no-repeat, conic-gradient(at bottom 8px left 8px, #0000 90deg,#000 0) 0 var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat, linear-gradient(#000 0 0) padding-box no-repeat;
  transition: 2s, -webkit-mask-position 2s 2s;
}

in chrome and edge no issues

tried to use the mask-image properties

.project-block_one-image {
  box-sizing: border-box !important;
  padding-top: 10px;
  padding-right: 10px;
  border-top: 1px solid;
  border-right: 1px solid;
  mask-image: conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0) var(--_i,200%) 0 /200% var(--_i,8px) border-box no-repeat, conic-gradient(at bottom 8px left 8px, #0000 90deg,#000 0) 0 var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat, linear-gradient(#000 0 0) padding-box no-repeat;
  transition: 2s, mask-image-position 2s 2s;
}

but the animation is lost