為什么這里transform不兼容IE？

用chrome沒(méi)問(wèn)題，用IE11的話，箭頭不能動(dòng)，怎樣讓它動(dòng)？以下是示例代碼：

<!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端的寫(xiě)法都是
@-moz-keyframes
@-o-keyframes
@keyframes
@-webkit-keyframes
個(gè)人都是這樣寫(xiě)的ie我沒(méi)有測(cè)試過(guò)你可以試試

2017年1月27日 16:47

編輯回答