CSS Animation Not working in all browsers

2019-07-13 10:36发布

站内问答 / HTML/CSS
1876 1 4

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

1条回答
成全新的幸福
2楼-- · 2019-07-13 11:16

Demo

You aren't using the browser specific syntax for the properties.

You do:

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

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));
    }
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)