极客观点
项目管理
HarmonyOS
用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>
html5
把这个@-webkit-keyframes 换成 @keyframes就好了，已经试验过
https://zhuanlan.zhihu.com/p/...