CSS3 или jQuery анимация с заданным шагом - PullRequest
Новая
       13

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

1 голос
/ 18 октября 2011

У меня есть 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 (я предполагаю, что меньшие шаги == более высокая производительность).

С уважением,

Ответы [ 2 ]

2 голосов
/ 29 апреля 2012

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

2 голосов
/ 24 января 2012

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

Дополнительную информацию можно получить по следующим ссылкам:

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

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

Поддерживается в веб-браузерах (Safari, Chrome) и FF5 +.

...