CSS动画不适用于所有浏览器 [英] CSS Animation Not working in all browsers
问题描述
我很难让除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：< a href = http://jsfiddle.net/Musicman/g7e34/ rel = nofollow> 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>
谢谢！
推荐答案
演示
您没有针对属性使用浏览器特定的语法。
Demo
You 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动画不适用于所有浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
