Мерцание анимации CSS3 при загрузке

Я вижу мерцание своего #content перед запуском анимации. Он работает, если я добавляю непрозрачность: от 0 до #content. Но тогда нет поддержки старого браузера. Любое другое решение?Мерцание анимации CSS3 при загрузке

Моя Fiddle: http://jsfiddle.net/9vafv3sn/

#content { 
    -webkit-animation: anime1 .6s .1s ease-in forwards; 
    background-color: #aaa; 
    width: 500px; 
    height: 500px; 
} 
@-webkit-keyframes anime1 { 
    0% { 
     opacity: 0; 
     top: -100px; 
    } 
    100% { 
     opacity: 1; 
     top: 0px; 
    } 
}

источник

2014-08-30 l00per

Анимация зависит, как вы знаете, от используемого веб-клиента. Который? –

Если вы хотите поддерживать старые браузеры, вы должны использовать jquery или другую легкую анимационную среду. – Brunis

@KIKOSoftware Вы видите префикс поставщика веб-сайтов? :) – Brunis

Я смотрел на него в Chrome для Windows, и я понимаю, что вы имеете в виду. Вы, вероятно, непреднамеренно, внесли задержку анимации.

Изменение:

-webkit-animation: anime1 .6s .1s ease-in forwards;

к:

-webkit-animation: anime1 .6s ease-in forwards;

Кажется, чтобы решить эту проблему для меня.

источник

2014-08-30 13:04:12

Да, это работает. Но часто возникает необходимость в задержке. – l00per

Если вы планировали задержку, вы можете сделать это, создав «последовательность» анимаций. Один для первого .1s, сохраняющий div прозрачным, а другой для следующего .6s, угасающего его. Используйте проценты, например. вот пример: http://jsfiddle.net/KIKO_Software/3mkbb92e/ –

Это очень хорошая идея и прекрасно работает :) – l00per

Мерцание анимации CSS3 при загрузке

ответ

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