css3动画播放

Question

@keyframes move {  0%{    transform: translate(0);  }  15%{    transform: translate(100px,180px);  }  30%{    transform: translate(150px,0);  }  45%{    transform: translate(250px,180px);  }  60%{    transform:translate(300px,0);  }  75%{    transform: translate(450px,180px);  }  100%{    transfrom: translate(480px,0);  }}div {  width: 500px;  height: 200px;  border: 1px solid red;  margin: 20px auto;}div span {  display: inline-block;  width: 20px;  height: 20px;  background: green;  border-radius: 100%;  animation-name:move;  animation-duration: 10s;  animation-timing-function:ease;  animation-delay:2s;  animation-iteration-count:infinite;}@-webkit-keyframes move {  0%{    transform: translate(0);  }  15%{    transform: translate(100px,180px);  }  30%{    transform: translate(150px,0);  }  45%{    transform: translate(250px,180px);  }  60%{    transform:translate(300px,0);  }  75%{    transform: translate(450px,180px);  }  100%{    transfrom: translate(480px,0);  }}div span {  -webkit-animation-name:move;  -webkit-animation-duration: 10s;  -webkit-animation-timing-function:ease;  -webkit-animation-delay:2s;  -webkit-animation-iteration-count:infinite;}@-moz-keyframes move {  0%{    transform: translate(0);  }  15%{    transform: translate(100px,180px);  }  30%{    transform: translate(150px,0);  }  45%{    transform: translate(250px,180px);  }  60%{    transform:translate(300px,0);  }  75%{    transform: translate(450px,180px);  }  100%{    transfrom: translate(480px,0);  }}div span {  -moz-animation-name:move;  -moz-animation-duration: 10s;  -moz-animation-timing-function:ease;  -moz-animation-delay:2s;  -moz-animation-iteration-count:infinite;}着到底哪里出错了，IE9和360下小圆球不能动！html代码为<div><span></span></div>

Answer 1

IE9不兼容CSS3动画的

Answer 2

IE9 以及更早的版本不支持 animation 属性。

Answer 3

你的代码没错，keyframes目前在IE的兼容性很差，我IE11都没法跑动很多关键帧动画，IE只能单纯跑那些背景色啊、width、height啊那些简单的动画。360也是IE内核的，所以360也存在兼容性问题