CSS3 Jumpy Анимации?

0

Я создаю простой слайдер CSS3. При выполнении двух разных переходов свойств, в частности transform: scale3d и left, анимация сначала выполняет преобразование, а затем переходит влево.

Скачок происходит только тогда, когда анимация завершена. Другими словами, если вы непрерывно щелкаете по следующему разделу, то переходы будут плавными.

Вот веб-сайт

Я сделал jsFiddle и, похоже, работает так, как хочу на jsFiddle: http://jsfiddle.net/BdG4k

По сути, это формат моего кода:

#slider > * {
    margin-left: -270px;
    position: absolute;
    -webkit-transition: all 1s;
}
#slider .module.leftX {
    left: XX%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}

Примечание. Я использую только -webkit, пока не получу его для работы. Затем я добавлю -moz и -ms.

  • 1
    Пожалуйста, выделите проблему, опубликуйте здесь код и демонстрацию, чтобы воспроизвести конкретную проблему, которая у вас есть.
  • 1
    вместо публикации ссылки на веб-сайт, пожалуйста, оставьте свой HTML, js или CSS-код на jsbin.com или используйте jsfiddle .
Показать ещё 3 комментария
Теги:
animation

1 ответ

0
Лучший ответ

Aaron проблема в том, что вы используете свойство transform только для браузера webkit.

В вашем js файле slider.js используется только хром-специфический префикс поставщика -webkit. Попробуйте добавить префикс -moz для Firefox также для IE.

$('#slider').ready( function() {
function slide(focus) {
var l1css = {
'opacity': 0.8,
'-webkit-transform': 'scale3d(0.5, 0.5, 1)',
'-moz-transform': 'scale3d(0.5, 0.5, 1)', /*for Firefox*/
'transform': 'scale3d(0.5, 0.5, 1)', /*for IE*/
'margin-left': '-135px',
'left': '19%'
};

проверьте рабочую демонстрацию

Поделиться
  • 0
    Woops. Я забыл удалить это. Это код, который я имел раньше. На данный момент у меня тот же CSS, но я использую только -webkit, пока он не заработает, тогда я собираюсь добавить -moz и -ms.
  • 1
    проверьте мою демонстрацию, я также добавил префикс вендора, и теперь плавная анимация работает на FF и в IE.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню