I'm currently facing an issue where only Firefox is able to animate the JSFiddle provided below.
Although I've included all necessary options for different browsers, it seems like something is not configured correctly :((
FIREFOX 27: WORKING
CHROME 33: NOT WORKING
IE 11: NOT WORKING
SAFARI (IPHONE): NOT WORKING
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>
Thanks!!