Why animation is buggy in firefox?

Question

css

Animated svg is buggy in firefox (opacity should be smoothly connected via keyframes, sometimes smoothly, sometimes not). In other browsers everything is ok.

#green__circle-mad {
  animation-name: green-circle-mad;
  animation-duration: 16s;
  animation-delay: 1s;
  animation-timing-function:linear;
}
#mad__item-2{
    -webkit-animation: first 3.5s;
    -moz-animation: first 3.5s;
    animation: first 3.5s;
}
#mad__item-3{
    -webkit-animation: second 6s;
    -moz-animation: second 6s;
    animation: second 6s;
}
#mad__item-4{
    -webkit-animation: second 9s;
    -moz-animation: second 9s;
    animation: second 9s;
}
#mad__item-5{
    -webkit-animation: third 11.2s;
    -moz-animation: third 11.2s;
   	animation: third 11.2s;
}
#mad__item-6{
    -webkit-animation: third 13.7s;
    -moz-animation: third 13.7s;
   	animation: third 13.7s;
}

@keyframes first {
    0% { opacity:0;}
    66% { opacity:0;}
    100% { opacity:1; }
}
@-webkit-keyframes first {
    0% { opacity:0;}
    66% { opacity:0;}
    100% { opacity:1; }
}
@-moz-keyframes first {
    0% { opacity:0;}
    66% { opacity:0;}
    100% { opacity:1; }
}
@keyframes second {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    100% { opacity:1; }
}
@-webkit-keyframes second {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    100% { opacity:1; }
}
@-moz-keyframes second {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    100% { opacity:1; }
}
@keyframes third {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    90% { opacity:0;}
    100% { opacity:1; }
}
@-webkit-keyframes third {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    90% { opacity:0;}
    100% { opacity:1; }
}
@-moz-keyframes third {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    90% { opacity:0;}
    100% { opacity:1; }
}
@keyframes green-circle-mad {
  0%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(80%);
  }
  100%{
    transform: translateX(80%);
  }
}
@-webkit-keyframes green-circle-mad {
  0%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(80%);
  }
  100%{
    transform: translateX(80%);
  }
}
@-moz-keyframes green-circle-mad {
  0%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(80%);
  }
  100%{
    transform: translateX(80%);
  }
}