如何解决CSS动画仅适用于Chrome,不适用于IE Edge
此CSS仅在Chrome中动画,而在IE Edge中不动画:https://codepen.io/Tester2929/pen/RwapXrp
似乎必须与此相关:
@keyframes animate {
from {left: -100px;}
to {left: 100%;}
0%{
transform: translateY(-250px) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-250px) rotate(0deg);
opacity: 0.5;
border-radius: 50%;
}
}
谁能说出它为什么在IE Edge中失败?
解决方法
嗨,您的CSS无法正常工作,因为某些旧的浏览器无法识别高级CSS,因此您必须像下面这样实现webkit前缀
@-webkit-keyframes animate {
from {left: -100px;}
to {left: 100%;}
0%{
-webkit-transform: translateY(-250px) rotate(0deg);
transform: translateY(-250px) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
-webkit-transform: translateY(-250px) rotate(0deg);
transform: translateY(-250px) rotate(0deg);
opacity: 0.5;
border-radius: 50%;
}
}
@keyframes animate {
from {left: -100px;}
to {left: 100%;}
0%{
-webkit-transform: translateY(-250px) rotate(0deg);
transform: translateY(-250px) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
-webkit-transform: translateY(-250px) rotate(0deg);
transform: translateY(-250px) rotate(0deg);
opacity: 0.5;
border-radius: 50%;
}
}
这与您的CSS相同,只是区别在于它具有webkit前缀,以便浏览器可以应用您的样式
,将以下脚本添加到您的代码中,然后重试可能会起作用
<script type="text/javascript" charset="utf-8" src="edge.js"></script>
<script type="text/javascript" charset="utf-8" src="edgeActions.js"></script>
<script type="text/javascript" charset="utf-8" src="edgePreload.js"></script>
,
我找到了一个解决方案,看来这可行:https://codepen.io/Tester2929/pen/vYGxoRe
看来IE Edge没有读取
from {left: -100px;}
to {left: 100%;}
我希望将动画从左到右排列,所以我将translateY更改为translateX。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。