Question

我一直在寻找，我发现问题的解决方案似乎没有用。

我是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

Answer 1

您需要在WebKit中向属性添加初始剪辑才能使其正常工作。

请参阅以下小提琴：

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

我补充说：

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

到div#barra

Answer 2

如果将clip属性添加到元素样式，则会为其设置动画：

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

在WebKit中设置CSS剪辑属性的动画问题

2 个答案: