фоном размер обложки делает css3 анимацию прерывистой

У меня есть сетка изображений, которые я хочу анимировать сверху с помощью css3. Он работает до тех пор, пока я не надену Background-size: накройте сетку. Анимация становится изменчивой. Что я делаю неправильно, или что я могу сделать, чтобы предотвратить это?фоном размер обложки делает css3 анимацию прерывистой

Когда я использую функцию анимации jquery, она становится еще хуже.

Я также нашел что-то вроде: -webkit-backface-visibility: hidden; , но это не делает трюк.

Пример: http://jsfiddle.net/PqdVZ/

body{ 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    background: #ccc; 
} 

div.container.animate{ 
    top:-100%; 
} 
div.container{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    -webkit-transition: top 1s ease-in-out; 
    -moz-transition: top 1s ease-in-out; 
    -o-transition: top 1s ease-in-out; 
    -ms-transition: top 1s ease-in-out; 
    transition: top 1s ease-in-out; 

} 

ul{ 
    display: block; 
    padding: 0; 
    margin: 0; 
} 

li{ 
    width: 25%;; 
    float: left; 
    height: 160px; 
    background-size: cover; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

источник

2013-05-13 Atticweb

Какой компьютер вы используете? И в каком браузере вы его протестировали? Это может быть проблема с производительностью компьютера. Для меня это работает очень хорошо, но у меня есть мощная машина. Посмотрите это тоже: http://stackoverflow.com/questions/8600635/jquery-animations-choppy-after-using-css3-transitions – Tbi45

У меня очень мощный компьютер, и я использую хром. Я вижу, что пример более плавный, чем фактический веб-сайт. возможно, потому что настоящий веб-сайт является полноэкранным. Но я вижу разницу, когда я удаляю правило размера фона. – Atticweb

Я все еще думаю, что есть проблема с производительностью. Анимация будет перемещать каждый пиксель из каждого изображения. Так что это будет немного тяжело для браузера для рендеринга, не говоря уже о том, что изображения большие, если вы говорите, что исходный вариант является полноэкранным. См. Также этот вопрос, возможно, он помогает (следует за проблемой производительности). http://stackoverflow.com/questions/7866423/css3-animations-and-performance-are-there-any-benchmarks. – Tbi45

Там нет ничего плохого с JavaScript, проблемы лежит в CSS. Анимация сверху, справа, снизу и слева - аппаратное ускорение. Это плохо, потому что он будет работать на вашем CPU, а не на вашем GPU. Когда вы видите отрывистый переход, вы можете поспорить, что вы не аппаратное ускорение. Поэтому вместо этого вы должны использовать аппаратное ускорение.

Вместо того, чтобы анимировать верх, вы должны анимировать преобразование (x, y, z). Это ускорит аппаратное ускорение.

Таким образом, вы должны изменить следующий CSS:

div.container.animate{ 
    top:-100%; 
} 

div.container{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    -webkit-transition: top 1s ease-in-out; 
    -moz-transition: top 1s ease-in-out; 
    -o-transition: top 1s ease-in-out; 
    -ms-transition: top 1s ease-in-out; 
    transition: top 1s ease-in-out; 
}

В это:

div.container{ 
    float: left; 
    width: 100%; 
    height: 100%; 

    -webkit-transform: translate3d(0, 0%, 0); 
     -moz-transform: translate3d(0, 0%, 0); 
     -ms-transform: translate3d(0, 0%, 0); 
     -o-transform: translate3d(0, 0%, 0); 
      transform: translate3d(0, 0%, 0); 

    -webkit-transition: all 1s ease-in-out; 
     -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
     -ms-transition: all 1s ease-in-out; 
      transition: all 1s ease-in-out; 
} 

div.container.animate{ 
    -webkit-transform: translate3d(0, -100%, 0); 
     -moz-transform: translate3d(0, -100%, 0); 
     -ms-transform: translate3d(0, -100%, 0); 
     -o-transform: translate3d(0, -100%, 0); 
      transform: translate3d(0, -100%, 0); 
}

Вот живая ссылка: http://jsfiddle.net/PqdVZ/1/

источник

2013-05-13 10:37:33

фоном размер обложки делает css3 анимацию прерывистой

ответ

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