1

我四处寻找，发现我的问题的解决方案似乎不起作用。

我是 CSS3 动画的新手，所以请多多包涵。

我正在使用 CSS3 创建一个简单的动画，它在 IE 和 Firefox 中运行良好，但在 Chrome 中不起作用。我尝试了几种解决方案，但似乎都没有。

<style type="text/css">
    html, body { height:100%; background-color: #ffffff;}
    body { margin:0; padding:0; overflow:hidden; }

    #center {
        width:100%; 
        height:50%; 
        position: relative;
    }




    @keyframes bounce {
          0% { clip: rect(0px, 0px, 150px, 0px); }
          100% { clip: rect(0px, 575px, 150px, 0px); }
    }   

    @-moz-keyframes bounce {
          0% { clip: rect(0px, 0px, 150px, 0px); }
          100% { clip: rect(0px, 575px, 150px, 0px); }
    }

    @-webkit-keyframes bounce {
          0% { clip: rect(0px, 0px, 150px, 0px); }
          100% { clip: rect(0px, 575px, 150px, 0px); }
    }

    div#barra {
            position:absolute;                      
            -webkit-animation: bounce 4s infinite alternate;        
            -moz-animation: bounce 4s infinite alternate;       
            animation:bounce 4s infinite alternate;
    }

    table{
        width:100%;
        height:100%;
    }
    </style>
</head>

<script type="text/javascript">
    function setup() {          
        var e = document.getElementById("barra");                                                       
        e.className = "bounce";
    }
</script>

<body onload="setup()"> 
    <table>
        <tr>
            <td align="middle">                 
                <div id="wrapper"  style="display: inline-block; "> 
                    <div id="center">
                        <div id="barra"><img src="barra.png"></div>
                        <div id="logo" ><img src="logo.png"></div>
                    </div>
                </div>                  
            </td>
        </tr>
    </table>
</body>

谁能看到我做错了什么？顺便说一句，要让它在移动设备上运行，我应该做些什么吗？

这是一个小提琴，显示了问题：http: //jsfiddle.net/yerathel27/pRWNv

4

2 回答 2

2

您需要将初始剪辑添加到 WebKit 中的属性以使其工作。

请参阅以下小提琴：

http://jsfiddle.net/pRWNv/2/

我补充说：

    clip: rect(0px, 575px, 150px, 0px);

至div#barra

于 2013-05-23T23:25:06.980 回答
0

如果将clip属性添加到它动画的元素样式中：

http://jsfiddle.net/trolleymusic/RJYFp/

于 2013-05-23T23:19:52.577 回答