CODEWITHSUNDEEP
javascripthtmlcsswebkit
ReignOfComputer
ReignOfComputer

Reputation: 757

CSS3 Animation not working in Chrome when called via JS

I have a footer with the following CSS:-

#transFooter {
opacity: 0;
margin-left: -2000px;
}

@-webkit-keyframes transFooter {
    100% { margin-left: 0; opacity: 1; }
}

@keyframes transFooter {
    100% { margin-left: 0; opacity: 1; }
}

It animates in with the following code:-

document.getElementById("transFooter").style.animation = "transFooter 2s forwards";

However, it doesn't seem to work on Chrome. Any ideas why?

Upvotes: 1

Views: 1251

Answers (2)

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

use this

document.getElementById("transFooter").style.webkitAnimation= "transFooter 2s forwards";

Upvotes: 0

howrad
howrad

Reputation: 1086

In JavaScript, add:

document.getElementById("transFooter").style["-webkit-animation"] = "transFooter 2s forwards";

http://jsfiddle.net/GMb3C/

Upvotes: 1

Related Questions