アニメーションボーダー効果は、私は私のWebページ要素にアニメーションの境界線の効果を追加するIE

Question

に取り組んでいないと、それはある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; 
    } 

にこのペンを見つけました正確に私が必要とするが、それはIEで動作しません。コードを調整しようとしましたが、動作させることができませんでした。あなたの助けに感謝します。ありがとう。

Answer 1

私はエッジを使用してcodepenを開いて、それは私が:) （IEは確かに問題があり、それはすでに描かれて国境をロードします）