CODEWITHSUNDEEP
cssgoogle-chromeanimationwebkit
Yerathel
Yerathel

Reputation: 33

Problems animating the CSS clip property in WebKit

I've searching around and the solution I found to my problem didn’t seem to work.

I’m new to CSS3 Animations, so bear with me please.

I’m creating a simple animation using CSS3 and it works great in IE and Firefox, but it doesn’t work in Chrome. I tried several solution but none seems to work.

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

Can anyone see what I’m doing wrong? And by the way, to make it work on mobile devices, is there any thing that I should do?

Here is a Fiddle, showing the issue: http://jsfiddle.net/yerathel27/pRWNv

Upvotes: 1

Views: 3232

Answers (2)

David Storey
David Storey

Reputation: 30414

You need to add an initial clip to the property in WebKit to make it work.

See the following Fiddle:

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

I added:

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

to div#barra

Upvotes: 2

Trolleymusic
Trolleymusic

Reputation: 2277

If you add the clip property to the element styles it animates:

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

Upvotes: 0

Related Questions