PDA

View Full Version : Simple animation works everywhere...except Firefox



shadyworm
15 Apr 2011, 1:16 PM
Hi,
first, Sencha Animator is a really great tool and easy to work with. Thank you, Sencha!

So I made a really simple animation, where a picture fades in from left to right, from opacity 0 to 1. (code below).
I uploaded it to my server and tested it on my Mac with Safari and Chrome and it works perfectly. However, it doesn't work with Firefox 4, it only shows the picture without the animation. Neither, it works with Firefox on Ubuntu.

Is there anything I can do, that it works on Firefox?


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>welcome &middot; Made with Sencha Animator</title><style type="text/css">
#AN-sObj-stage {
position: relative;
overflow:hidden;
-webkit-perspective: 600;
}
#AN-sObj-stage div { position: absolute; }
#AN-sObj-stage a {color: inherit; text-decoration:none;}
#AN-sObj-stage * {margin:0; padding:0;-webkit-transform-style:preserve-3d;}
body,#AN-sObj-stage {margin:0; padding:0;}
#AN-sObj-stage{ width: 420px;
height: 300px;
border-color: black;
background-color: white;
}
#AN-sObj-1{ top: 0px;
left: 0px;
width: 100px;
height: 100px;
}
#AN-sObj-2{ width: 420px;
height: 300px;
top: 1px;
left: 0px;
}

@-webkit-keyframes AN-ani-0 {
0% {
-webkit-transform: translate3d(-420px, 0px, 0px);

opacity: 0;
-webkit-animation-timing-function: ease-out;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);

opacity: 1;
-webkit-animation-timing-function: ease;
}
}
</style>

</head>
<body>
<div id="AN-sObj-stage"><div class="AN-Object" id="AN-sObj-2" style="-webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-0; -webkit-animation-duration: 2.09s; "><div id="AN-sObj-val-2"><img src="welcome.jpg"></div></div></div></body>
</html>

mmullany
1 May 2011, 7:05 PM
There are two problems
1) Animator only supports webkit browsers right now (so no firefox support)
2) Firefox 4 doesn't support @keyframe animations, although they are expected to be in FF5