CODEWITHSUNDEEP
cssanimation
sixside
sixside

Reputation: 31

CSS Animation doesn't work in Google Chrome but works in other browsers

If you look at this example http://codepen.io/jezen/pen/CAHsk, you'll see the animation runs in Chrome (v29) (as well as other modern browsers). I took the exact same CSS code and saved it to my local drive, and created a really simple HTML page that references the CSS file. The page loads and the CSS styles are applied, but the animation doesn't run in my local version.

The HTML file is as simple as this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arcs</title>
    <link rel="stylesheet" type="text/css" href="arcs.css">
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

And the arcs.css file I'm referencing is an exact copy/paste from the source site that I've linked to above.

One other interesting piece of information. If you go to the authors demo site here: http://jezenthomas.com/experiments/arcify/ with the same browser, the animation runs just fine. But if you click on the "HAML" "JS" or "CSS" tabs in the example provide, and then click back to "Results" tab, you'll see that the animation no longer runs.

Upvotes: 0

Views: 1122

Answers (1)

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

You need to add -webkit- prefix to the animation and transform tags in your css. Currently MS IE10 and FF supports unprefixed transforms. Good luck and let me know how it goes! :)

Upvotes: 1

Related Questions