Почему в firefox глючит анимация?

Question

[Женя]

Анимированная svg глючит в firefox (должно плавно opacity подключаться через keyframes, там то плавно, то нет). В остальных браузерах все ок.

#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%);
	}
}

Comments

[Ankhena]

Живой песочницы на jsfiddle.net нет, делать за вас лениво, поэтому для начала просто предложу убрать свойства с префиксами moz, а оставшиеся написать в правильном порядке. Т.е. сначала с префиксами, потом без.
Да и вообще пользоваться автопрефиксером.

Следующим ходом, я бы упростила анимации.
Тут очень много лишних букв.

@-moz-keyframes third {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    90% { opacity:0;}
    100% { opacity:1; }
}

Лично я бы вообще все заменила на одну у которой 0 - прозрачно, 100 не прозрачно и пользовалась бы animation-delay и, если нужно, временными функциями.

[Женя]

Ankhena, мне нужно чтобы они поочередно плавно появлялись, а если делать 0% - opacity-0, 100%-opacity-1 и через delay задержку ставить, не получается такого эффекта

[Ankhena]

Женя, ну ок, но всё равно промежуточные нули лишние, достаточно 90%, зачем их еще раз писать в 66 и 80?
И это не отменяет первой части.

[Женя]

Ankhena, спасибо за помощь. Действительно лишние нули были лишние, из-за этого в firefox были глюки