CODEWITHSUNDEEP
cssanimation
penu
penu

Reputation: 1030

Animation with @keyframes is not working in Chrome

This css seems to work fine in Firefox, but not in chrome

.animate {
    animation: blink .5s step-end infinite alternate;
    -webkit-animation: blink .5s step-end infinite alternate;
}
@keyframes blink { 
   50% { border-color: red; background-color: rgba(255, 0, 0, 0.3);} 
}
-webkit-@keyframes blink { 
   50% { border-color: red; background-color: rgba(255, 0, 0, 0.3);} 
}

http://jsfiddle.net/18qtvfo0/

What gives?

Upvotes: 0

Views: 389

Answers (1)

user2864740
user2864740

Reputation: 61865

The ultimate problem is the selector used is incorrect - which is a simple typographical error and also earned a close vote!

-webkit-@keyframes

Should be the following, with the @ sign at the start,

@-webkit-keyframes

The original fiddle also fails to run correctly (anywhere) because the DIV is missing the 'animate' class - here is a corrected version that works in Firefox and Chrome/WebKit.

Upvotes: 2

Related Questions