@JenyaLa
Junior web-developer

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

Анимированная 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%);
	}
}
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы