Анимация CSS3 или jQuery с заданным шагом

У меня есть CSS, который делает эффект затухания.

#mainframe.normal
{
    opacity: 1.0;
}
#mainframe.faded
{
    opacity: 0.0;
}
#mainframe
{
  /* Firefox */
  -moz-transition-property: opacity;
  -moz-transition-duration: 3s;
  /* WebKit */
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 3s;
  /* Standard */
  transition-property: opacity;
  transition-duration: 3s;
}

Управляется следующим скриптом:

document.getElementById('mainframe').className = "faded";

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

Есть ли способ установить время ожидания одного кадра (или, что то же самое, сколько кадров следует использовать)?

Мне это нужно, чтобы попытаться улучшить плавность на iPhone (я предполагаю, что меньшее количество шагов == более высокая производительность).

С уважением,


jquery css opacity performance
person noober    schedule 18.10.2011    source источник
comment
Надеюсь, у кого-то есть хороший ответ, и в крайнем случае вы могли бы сделать это с помощью функции анимации?   -  person Marco Johannesen    schedule 18.10.2011

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, вы ищете функциональность, предоставляемую анимацией ключевых кадров css3.

Более подробная информация доступна по следующим ссылкам:

https://developer.mozilla.org/en/CSS/CSS_animations

https://developer.mozilla.org/en/CSS/@keyframes

Поддерживается в браузерах webkit (safari, chrome) и FF5+.

person 1nfiniti    schedule 23.01.2012

arrow_upward
2
arrow_downward

Вы можете проверить это: Animate.css.

person Alerty    schedule 28.04.2012
comment
Не имеет отношения к вопросу, но в любом случае хороший инструмент для просмотра. Спасибо. - person noober; 29.04.2012
comment
Это было в основном для того, чтобы привести примеры использования. Посмотрите на эффект затухания: github.com/daneden /animate.css/blob/master/animate.css#L807 - person Alerty; 30.04.2012
comment
О, он содержит еще и @-webkit-keyframes... Что ж, тогда он актуален на самом деле. - person noober; 01.05.2012