Question

我无法将任何浏览器与Firefox分开，以激活下面的JSFiddle ..

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

FIREFOX 27：工作

CHROME 33：不工作

IE 11：不工作

SAFARI（IPHONE）：不工作

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>

谢谢！

Answer 1

Demo

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

你这样做：

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

应该是这样，请注意我在转换前使用-webkit-transform：

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

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

1 个答案:

Demo