@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>
3 回答

迷途的馬爾斯
TA貢獻72條經驗 獲得超106個贊
你的代碼沒錯,keyframes目前在IE的兼容性很差,我IE11都沒法跑動很多關鍵幀動畫,IE只能單純跑那些背景色啊、width、height啊那些簡單的動畫。360也是IE內核的,所以360也存在兼容性問題
- 3 回答
- 0 關注
- 1860 瀏覽
添加回答
舉報
0/150
提交
取消