Ошибка сафари в анимации CSS-непрозрачности?

У меня есть простой анимации (только для Safari в данном примере):Ошибка сафари в анимации CSS-непрозрачности?

h1 { 
    -webkit-animation: moveDown 1s ease-in-out; 
} 

@-webkit-keyframes moveDown { 
    0% {-webkit-transform: translateY(-20px); opacity: 0;} 
    100% {-webkit-transform: translateY(0px); opacity: 1;} 
}

В последней Safari (5.1.5) он работает просто отлично.

Но случайно я просмотрел пример в более раннем Safari (5.0.6) и ничего не увидел. Х1 исчез.

По виду запуска Eather пути добавления None-Поворота (непрозрачность & анимационных работ):

@-webkit-keyframes moveDown { 
    0% {-webkit-transform: translateY(-20px) rotate(0deg); opacity: 0;} 
    100% {-webkit-transform: translateY(0px) rotate(0deg); opacity: 1;} 
}

или начать на 1% (непрозрачность не работает, но анимация):

@-webkit-keyframes moveUp{ 
    1% {-webkit-transform: translateY(-20px); opacity: 0;} 
    100% {-webkit-transform: translateY(0px); opacity: 1;} 
}

он работал снова.

Теперь это приводит меня к двум серьезным вопросам:

Что я сделал неправильно в первом примере?
Есть ли известная ошибка в более ранней версии Safari, с которой я должен рассматривать разные?

Причина:

Я не возражаю, если вы не можете увидеть анимацию в не поддерживающих браузеров (это просто приятно добавить на), но было бы решаясь не знать, когда ваш анимированный элемент просто больше не появляется.

Как я могу использовать анимацию вообще как дополнение к ней, не беспокоясь?

Если кто-нибудь попросит скрипку: я попытался воссоздать ее. Но вот еще одна интересная вещь: тот же самый код не будет иметь никакого эффекта в старом Safari в jsfiddle. Он не оживляет и не исчезает.

~~Edit:~~

Я просто видеть, что h1 не исчезающий больше с исходным кодом (я не могу восстановить его), но не делает каких-либо анимации Eather. Он просто работает с одним из описанных триггеров.

JS-FIDDLE:

Here a working fiddle with the two examples.

источник

2012-06-07 Melros

Не могли бы вы привести пример html, с которым вы пытаетесь использовать это? –

Я только что добавил скрипку, которая сейчас работает так, как я имел в виду. Если вы используете старый Safari (5.0.6), правильный код не будет работать. Только срабатывает. – Melros

У меня нет старой версии Safari удобных, но я помню, играя с анимацией в старых версиях и встречаюсь эти типы ошибок. Я работал вокруг них, помещая «конечное состояние» в селектор, например. p {opacity: 1}http://jsfiddle.net/pkFaT/

источник

2012-06-07 15:38:21 Duopixel

Во-первых, спасибо, что сказали, что это своего рода очевидная ошибка. Но ваше решение (я тоже пробовал) не влияет ни на что. Все еще застрял с триггером степени. Вы сказали бы, что это может случиться только для Сафари? Или, по крайней мере, только для непрозрачности?Я не возражаю против его применения, чтобы быть уверенным, что контент, по крайней мере, не исчезнет. Любые другие знают ошибки? – Melros

Я принимаю ответ за то, что дал мне отзыв, что это известная ошибка. Но до сих пор я останусь с триггером. – Melros

Ошибка сафари в анимации CSS-непрозрачности?

ответ

Смежные вопросы