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

【问题标题】：CSS Animation Not working in all browsersCSS动画不适用于所有浏览器
【发布时间】：2014-02-24 08:24:17
【问题描述】：

我无法让除 Firefox 之外的任何浏览器为下面的 JSFiddle 设置动画..

我想我已经为浏览器添加了所有选项，但有些不对:((

Firefox 27：工作

Chrome 33：不工作

IE 11：不工作

Safari（iPhone）：不工作

JSFIDDLE：http://jsfiddle.net/Musicman/g7e34/

我的密码：

<!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>

谢谢！！

【问题讨论】：

您没有使用浏览器特定的属性语法。

标签： html css animation

【解决方案1】：

Demo

您没有使用浏览器特定的属性语法。

你这样做：

@-webkit-keyframes slidein {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(calc(-100% + 250px));
    }
}

应该是这个，注意我在transform前使用了-webkit-transform：

@-webkit-keyframes slidein {
    from {
        -webkit-transform:translateX(0);
    }
    to {
        -webkit-transform:translateX(calc(-100% + 250px));
    }
}

【讨论】：

啊哈..谢谢!!...仍然无法在 IE 中工作...我尝试了 -ms- 前缀，但它们也没有工作...有什么想法吗？
你用的是什么IE？我知道它在下面的 IE9 上不起作用。
我犯了同样的错误，谢谢。
伟大的@Ali Gajani！