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

Posted 2023-03-06

技术标签:

【中文标题】在 WebKit 中为 CSS 剪辑属性设置动画的问题【英文标题】：Problems animating the CSS clip property in WebKit 【发布时间】：2013-05-18 18:50:49 【问题描述】：

我四处寻找，但我找到的解决问题的方法似乎不起作用。

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

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

这是一个 Fiddle，显示问题：http://jsfiddle.net/yerathel27/pRWNv

【问题讨论】：

jsfiddle.net/yerathel27/pRWNv 这项工作是 Firefox 和 IE，但它在 Chrome 上没有动画，你能帮帮我吗？好吧，我现在很确定问题出在 chrome 上的剪辑功能上，因为如果尝试不透明度，它会完美工作...有谁知道剪辑是否不使用@-webkit-keyframes？ 【参考方案1】：

您需要在 WebKit 中的属性中添加一个初始剪辑才能使其工作。

请参阅以下小提琴：

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

我补充说：