animation dont work on firefox - html

Question

The first animation works in Firefox, but the last doesn't work. What could be the problem?
Is there something what I've missed?
http://jsfiddle.net/s6n4sc0s/
CSS:
#container {
width:300px;
height: 250px;
/*overflow:hidden;*/
}
#image{
display: block;
width: 300px;
height: 250px;
float:left;
position: relative;
}
h1{
color: #aaba38;
font-size: 26px;
font-weight: bold;
}
#title{
position: relative;
-webkit-animation: mailigen 20s infinite; /* Chrome, Safari, Opera */
animation: mailigen 20s infinite;
}
#slide{
float:left; position: relative; width:200px; text-align:right;
position: relative;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: mymove 20s infinite;
-o-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
#slide2{
position: relative;
-webkit-animation: mymove2 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: mymove2 20s infinite;
-o-animation: mymove2 20s infinite;
animation: mymove2 20s infinite;
}
#slide3{
position: relative;
-webkit-animation: circle2 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: circle2 20s infinite;
-o-animation: circle2 20s infinite;
animation: circle2 20s infinite;
}
#slide4{
position: relative;
-webkit-animation: circle3 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: circle3 20s infinite;
-o-animation: circle3 20s infinite;
animation: circle3 20s infinite;
}
/* Chrome, Safari, Opera TITLE*/
#-webkit-keyframes mailigen {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
100% {right: 210px;}
}
/* Standard syntax */
#keyframes mailigen {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
100% {right: 210px;}
}
/* Chrome, Safari, Opera FOR SLIDE1*/
#-webkit-keyframes mymove {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
20% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes mymove {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
20% {right: 0px;}
100% {right: 0px;}
}
/* Chrome, Safari, Opera FOR CIRCLE 1*/
#-webkit-keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
#-moz-keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
#-o-keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
/* Chrome, Safari, Opera FOR CIRCLE 2*/
#-webkit-keyframes circle2 {
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes circle2 {
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
/* Chrome, Safari, Opera FOR CIRCLE 3*/
#-webkit-keyframes circle3 {
60% {right: 0px;}
65% {right: 0px;}
70% {right: 260px;}
80% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes circle3 {
60% {right: 0px;}
65% {right: 0px;}
70% {right: 260px;}
80% {right: 0px;}
100% {right: 0px;}
}
.first, .second, .third{
float: left;
position: relative;
width: 200px;
left: 300px;
top: -260px;
text-align: right;
}
.second{padding-bottom:20px;}
/* CIRCLE ONE */
.circle {
position: absolute;
left: 320px;
top: 39px;
border-radius: 50%;
width: 180px;
height: 180px;
background-color: #bec751;
opacity: 0.8;
border: 5px solid #ffffff;
/* width and height can be anything, as long as they're equal */
}
.circle span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}
/* CIRCLE TWO */
.circle2 {
position: absolute;
left: 320px;
top: 39px;
border-radius: 50%;
width: 180px;
height: 180px;
background-color: #843881;
opacity: 0.8;
border: 5px solid #ffffff;
/* width and height can be anything, as long as they're equal */
}
.circle2 span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}
/* CIRCLE THREE */
.circle3 {
position: absolute;
left: 320px;
top: 39px;
border-radius: 50%;
width: 180px;
height: 180px;
background-color: #146671;
opacity: 0.8;
border: 5px solid #ffffff;
/* width and height can be anything, as long as they're equal */
}
.circle3 span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}

Answer 1

So the correct answer is, that its needed to put 0% and 100% for other browsers that chrome
#-moz-keyframes circle2 {
0% {right: 0px;}
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}

Answer 2

You don't have a #-moz-keyframes set for the circle animations. Add
#-moz-keyframes circle2 {
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
To the end of your CSS for each animation. See this answer for further information
Why isn't -moz-animation working?