• 0

Firefox HTML5 animation problem

Asked by n_K,

 Share

Question

Grand Master

n_K

Posted
Posted

So I'm trying to do some animation and only focusing on firefox at the moment before adding the code for IE, webkit, opera and other browsers. But I'm encountering a problem, when I run this in firefox 8, the final object that has no animation assigned to it, is being moved exactly the same as the image before it. It's really annoying, and ****ing me off so I'm assuming I'm doing something wrong, any ideas?

HTML:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
		<link href="animation.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div>
			<img src="ani1.png" id="ani1" name="ani1">
			<img src="ani2.png" id="ani2" name="ani2">
		</div>
		<a>Bug</a>
				<img src="static.png" id="static1" name="static1" />
	</body>
</html>
[/CODE]

CSS:

[CODE]
#ani1
{
margin-left: auto;
margin-right: auto;
-moz-animation-name: ani1;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: 1;
-moz-animation-play-state:running;
display:block;
position:relative;
top:80px;
}
#ani2
{
margin-left: auto;
margin-right: auto;
-moz-animation-name: Ani2;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: 1;
-moz-animation-play-state:running;
display:block;
position:relative;
top:80px;
}

#static1
{
margin-left: auto;
margin-right: auto;
}

@-moz-keyframes ani1
{
0%
{
-moz-transform: rotate(180deg);
width:0px;
height:0px;
left:0px;
top:80px;
}
100%
{
-moz-transform: rotate(0deg);
width:85px;
height:106px;
left:-230px;
top:230px;
}
}

@-moz-keyframes ani2
{
0%
{
-moz-transform: rotate(180deg);
width:0px;
height:0px;
left:0px;
top:80px;
}
100%
{
-moz-transform: rotate(0deg);
width:60px;
height:60px;
left:30px;
top:60px;
}
}

[/CODE]

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

n_K

Posted
  • Author
Posted

I changed some of the names from things like SpaceObj1 in the original code so it made more sense here, there's no mis-matches in the code and nothing that'd cause this bug by different cases.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing