javascript - HTML5 animated image error: "Error in parsing value for ‘animation’. Declaration dropped." -
only in firefox message: "error in parsing value ‘animation’. declaration dropped." other browser wont return message after pressing of d key nothing happens.
this html5 code:
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> @keyframes face-forward { 100% { background-position: 0px 0px; } } @keyframes walk-right { 0% { background-position: 0px -180px; } 100% { background-position: -960px -180px; } } @keyframes walk-left { 0% { background-position: 0px -583px; } 100% { background-position: -960px -583px; } } </style> <script> var sprite1; var spritesheet = new image(); // spritesheet.src = "./images/adam_sprite_sheet_a.png"; spritesheet.src = "http://s4.postimg.org/g92rbk2r1/adam_sprite_sheet_a.png"; function docready() { sprite1 = document.createelement("div"); sprite1.id = "sprite_1"; sprite1.style.width = "120px"; sprite1.style.height = "180px"; sprite1.style.background = "url("+spritesheet.src+")"; document.body.appendchild(sprite1); //add event listener document object keydown event document.addeventlistener('keydown', function(event) { var key_press = string.fromcharcode(event.keycode); // alert(event.keycode+" | "+key_press); if(key_press == "a"){ // alert("key pressed: "+key_press); sprite1.style.animation = "walk-left 0.9 steps(8) infinite"; } else if(key_press == "d") { // alert("key pressed: "+key_press); sprite1.style.animation = "walk-right 0.9 steps(8) infinite"; } }); // add event listener document object keyup event document.addeventlistener('keyup', function(event) { // sprite1.style.animation = "face-forward 0.1 steps(1) 1"; // alert("chk:up"); sprite1.style.animation = "walk-right 0.1 steps(8) infinite"; } ); } window.addeventlistener("load", docready); </script> </head> <body> </body> </html> or jsfiddle if prefer...
Comments
Post a Comment