CSS动画不适用于所有浏览器

本文介绍了CSS动画不适用于所有浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我很难让除Firefox之外的任何浏览器动画化下面的JSFiddle。I am having trouble getting any browser apart from Firefox to animate the JSFiddle below..我想我已经为浏览器添加了所有选项，但有些不正确:( （I think i have added all options for browsers but somethings not right :(( FIREFOX 27：工作FIREFOX 27: WORKING第33章：不工作 IE 11：不工作 Safari（IPHONE）：不工作SAFARI (IPHONE): NOT WORKING JSFIDDLE： http://jsfiddle.net/Musicman/g7e34/JSFIDDLE: http://jsfiddle.net/Musicman/g7e34/ MYCODE：<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css"> #wrapper { width: 250px; height: 40px; background-color: #383838; color: red; } .nowPlayAnimate { position:absolute; white-space:nowrap; overflow: hidden; -moz-animation: slidein 1s infinite linear alternate; -webkit-animation: slidein 1s infinite linear alternate; -o-animation: slidein 1s infinite linear alternate; animation: slidein 1s infinite linear alternate; } @-moz-keyframes slidein { from { transform:translateX(0); } to { transform:translateX(calc(-100% + 250px)); /* -100% + parent width */ } } @-webkit-keyframes slidein { from { transform:translateX(0); } to { transform:translateX(calc(-100% + 250px)); } } @-o-keyframes slidein { from { transform:translateX(0); } to { transform:translateX(calc(-100% + 250px)); } } @keyframes slidein { from { transform:translateX(0); } to { transform:translateX(calc(-100% + 250px)); } }</style></head><body><div id="wrapper"> <div id="list0title" class="nowPlayAnimate"></div></div><div id="wrapper"><div id="list0artist" class="nowPlayAnimate"></div></div><script>var testtext="Animation"; document.getElementById("list0title").innerHTML=testtext;var testtext="More Animation"; document.getElementById("list0artist").innerHTML=testtext;</script></body></html>谢谢！推荐答案演示您没有针对属性使用浏览器特定的语法。DemoYou aren't using the browser specific syntax for the properties.您这样做：@-webkit-keyframes slidein { from { transform:translateX(0); } to { transform:translateX(calc(-100% + 250px)); }}应该是这样，请注意，我使用 -webkit-transform 转换前：It should be this, note that I use the -webkit-transform before transform:@-webkit-keyframes slidein { from { -webkit-transform:translateX(0); } to { -webkit-transform:translateX(calc(-100% + 250px)); }} 这篇关于CSS动画不适用于所有浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！