CODEWITHSUNDEEP
htmlcssanimation
neo
neo

Reputation: 55

CSS Animation is creating the animation effect in Google Chrome

I have a simple CSS Animation code but the animation effect is not shown in the Google Chrome browser.

I am not able to figure out what is missing.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS Animation</title>
    <style>
    @keyframes colors {
        0% ( background-color: red; )
        20% ( background-color: orange; )
        40% ( background-color: yellow; )
        60% ( background-color: green; )
        80% ( background-color: blue; )
        100% ( background-color: purple; )
    }
    #magic {
        width: 100px;
        padding: 1em;
        text-align: center;
        margin: 5em;
        border: 2px solid red;
        border-radius: 6px;
        animation-name: colors;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }
    </style>
</head>
<body>
    <div id="magic">Magic!</div>
</body>
</html>

Fiddle

Upvotes: 2

Views: 76

Answers (2)

Jry9972
Jry9972

Reputation: 473

You should use @-webkit-keyframes for Chrome & Safari, @-moz-keyframes for Firefox, and @-o-keyframes for Opera.

Source: http://www.w3schools.com/css/css3_animations.asp

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

You need to add the @-webkit-keyframes syntax to support Chrome, Safari and Opera as well like so:

@-webkit-keyframes colors {
  0% { background-color: red;
  } 20% { background-color: orange;
  } 40% { background-color: yellow;
  } 60% { background-color: green;
  } 80% { background-color: blue;
  } 100% { background-color: purple;
  }
}

Also notice that you should be using curly braces instead of ( and )

Here is the JSFiddle demo

Upvotes: 2

Related Questions