Animierte Grenzeffekt funktioniert nicht auf IE

Question

ich animierte Grenze Effekt auf meiner Web-Seite Elemente hinzufügen möchten, und fanden diese Feder auf codepen

HTML

<div> 
    <h1>Hover over me!</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
</div> 

CSS

@keyframes bg { 
     0% { 
     background-size: 0 3px, 3px 0, 0 3px, 3px 0; 
     } 
     25% { 
     background-size: 100% 3px, 3px 0, 0 3px, 3px 0; 
     } 
     50% { 
     background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; 
     } 
     75% { 
     background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; 
     } 
     100% { 
     background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; 
     } 
    } 
    div { 
     width: 25%; 
     margin: 2rem auto; 
     padding: 2rem; 
     background-repeat: no-repeat; 
     background-image: 
     linear-gradient(to right, #c9c9c9 100%, #c9c9c9 100%), 
     linear-gradient(to bottom, #c9c9c9 100%, #c9c9c9 100%), 
     linear-gradient(to right, #c9c9c9 100%, #c9c9c9 100%), 
     linear-gradient(to bottom, #c9c9c9 100%, #c9c9c9 100%); 
     background-size: 
     100% 3px, 
     3px 100%, 
     100% 3px, 
     3px 100%; 
     background-position: 
     0 0, 
     100% 0, 
     100% 100%, 
     0 100%; 
     animation: bg 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1; 
     animation-play-state: paused; 
    } 

    div:hover { 
     animation-play-state: running; 
    } 

Es ist genau das, was ich brauche, aber es funktioniert nicht auf IE. Ich habe versucht, den Code zu optimieren, konnte es aber nicht funktionieren lassen. Wäre dankbar für deine Hilfe. Vielen Dank.

Answer 1

ich Ihre codepen Edge geöffnet und es funktioniert gut ich glaube :) (IE in der Tat ein Problem haben, lädt es mit Grenze bereits gezeichnet)