CSS动画在IE和Edge中不起作用

Question

我有以下CSS代码，这是一种很好的声纳效果，适用于悬停时的元素。 它在Firefox，Opera和Chrome中运行良好，但我也无法使其在IE（10+）和Edge中运行。

 body { background-color: #cccccc; } .text { position: realtive; display: block; width: 85px; margin: 150px auto 0px; background-color: #; } .content { display: block; position: relative; height: 100px; width: 100px; border: 2px solid white; border-radius: 100%; margin: 20px auto; } .icon { display: block; height: 100px; width: 100px; background-color: red; } .whiteSonarEffect .icon { border-radius: 100%; position: relative; } .whiteSonarEffect .icon:after { position: absolute; width: 100%; height: 100%; border-radius: 100%; content:''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; top: 0; left: 0; } .whiteSonarEffect .icon:hover { color: #fff; } .whiteSonarEffect .content:hover .icon:after { -webkit-animation: whiteSonarEffect 1.3s ease-out 75ms; -moz-animation: whiteSonarEffect 1.3s ease-out 75ms; -o-animation: whiteSonarEffect 1.3s ease-out 75ms; animation: whiteSonarEffect 1.3s ease-out 75ms; } @-webkit-keyframes whiteSonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes whiteSonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); -moz-transform: scale(1.5); opacity: 0; } } @-o-keyframes whiteSonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); -o-transform: scale(1.5); opacity: 0; } } @keyframes whiteSonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); transform: scale(1.5); opacity: 0; } } 

 <div class="whiteSonarEffect"> <div class="text"><h3>Hover Me</h3></div> <div class="content"> <div class="icon"></div> </div> </div> 

您可以在CodePen上查看它： http ://codepen.io/ivanchi/pen/YWNjVN对于任何建议，我们将不胜感激。

Answer 1

我过去也遇到过类似的问题（不记得在哪里/什么时候），但是IE也要求在0%关键帧中设置box-shadow 。 在下面的代码段中，我添加了与40%关键帧相同的box-shadow ，但是为所有阴影指定了alpha = 0的颜色，以确保其不可见。

这适用于IE11，Edge，Chrome，Opera和Firefox。

 body { background-color: #cccccc; } .text { position: realtive; display: block; width: 85px; margin: 150px auto 0px; background-color: #; } .content { display: block; position: relative; height: 100px; width: 100px; border: 2px solid white; border-radius: 100%; margin: 20px auto; } .icon { display: block; height: 100px; width: 100px; background-color: red; } .whiteSonarEffect .icon { border-radius: 100%; position: relative; } .whiteSonarEffect .icon:after { position: absolute; width: 100%; height: 100%; border-radius: 100%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; top: 0; left: 0; } .whiteSonarEffect .icon:hover { color: #fff; } .whiteSonarEffect .content:hover .icon:after { -webkit-animation: whiteSonarEffect 1.3s ease-out 75ms; -moz-animation: whiteSonarEffect 1.3s ease-out 75ms; -o-animation: whiteSonarEffect 1.3s ease-out 75ms; animation: whiteSonarEffect 1.3s ease-out 75ms; } @-webkit-keyframes whiteSonarEffect { 0% { opacity: 0.3; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0); } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes whiteSonarEffect { 0% { opacity: 0.3; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0); } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); -moz-transform: scale(1.5); opacity: 0; } } @-o-keyframes whiteSonarEffect { 0% { opacity: 0.3; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0); } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); -o-transform: scale(1.5); opacity: 0; } } @keyframes whiteSonarEffect { 0% { opacity: 0.3; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0); } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5); transform: scale(1.5); opacity: 0; } } 

 <div class="whiteSonarEffect"> <div class="text"> <h3>Hover Me</h3> </div> <div class="content"> <div class="icon"></div> </div> </div>