鍍金池/ 問答/HTML5  HTML/ 為什么這里transform不兼容IE？

為什么這里transform不兼容IE？

用chrome沒問題，用IE11的話，箭頭不能動，怎樣讓它動？以下是示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>arrow</title>
<style>
.arrow.on {
display: block;
animation: goNext 1.5s infinite;
-webkit-animation: goNext 1.5s infinite;
animation-name: goNext;
-webkit-animation-name: goNext;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: initial;
-webkit-animation-timing-function: initial;
animation-delay: initial;
-webkit-animation-delay: initial;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-direction: initial;
-webkit-animation-direction: initial;
animation-fill-mode: initial;
-webkit-animation-fill-mode: initial;
animation-play-state: initial;
-webkit-animation-play-state: initial;
}
@-webkit-keyframes goNext{0%{
transform: translate(0,0) translateZ(0);
-ms-transform: translate(0,0) translateZ(0);
-moz-transform: translate(0,0) translateZ(0);
-webkit-transform: translate(0,0) translateZ(0);
-o-transform: translate(0,0) translateZ(0);
opacity:1
}
100%{
transform:translate(0,-10px) translateZ(0);
transform: translate(0,-10px) translateZ(0);
-ms-transform: translate(0,-10px) translateZ(0);
-moz-transform: translate(0,-10px) translateZ(0);
-webkit-transform: translate(0,-10px) translateZ(0);
-o-transform: translate(0,-10px) translateZ(0);
opacity:.1
}
}
.arrow{ cursor:pointer;}
</style>
</head>
<body>
<div class="arrow on" style="position:absolute; left:0; bottom:0; height:500px; width:100%;background:url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1784182257,3665892331&fm=27&gp=0.jpg) no-repeat center bottom 5px;"></div>
</body>
</html>
回答
編輯回答
安淺陌

@-webkit-keyframes goNext是webkit為核心的瀏覽器
一般pc端的寫法都是
@-moz-keyframes
@-o-keyframes
@keyframes
@-webkit-keyframes
個人都是這樣寫的ie我沒有測試過你可以試試

2017年1月27日 16:47
編輯回答
替身

把這個@-webkit-keyframes 換成 @keyframes就好了，已經(jīng)試驗過

https://zhuanlan.zhihu.com/p/...

2017年8月28日 17:17
編輯回答
亮瞎她

測試結(jié)果：
Firefox 下，嵌套的 @keyframes 會生效，且拖動窗口寬度可以動態(tài)切換動畫效果。

Chrome/Safari 下，嵌套的 @keyframes 會生效，但拖動窗口無法動態(tài)切換效果。

IE11下，嵌套的 @keyframes 無效。

測試頁面：JS Bin - Collaborative JavaScript Debugging

（順帶測了一下 @counter-style，只有 Firefox 支持）

測試地址

2017年10月10日 09:36