Джиттер на хром css анимации

Question

Попытка сделать анимацию css, которая исчезает на изображении из центра, используя два центрированных div с тем же фоновым изображением [svg] и анимацию их ширины и положения фона. Проблема в том, что на хроме возникает ужасная проблема дрожания (возможно, из хрома, проходящего через этапы анимации, вместо того, чтобы делать их одновременно?)

Вот jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/, где вы можете увидеть проблему с дрожанием слева (который имеет одновременную анимацию ширины и анимацию фоновой позиции).

Соответствующий код (извините за некоторый остаточному материал с сайта он находится в)

HTML:

<div class="underheader-wrapper uhw-title"> 
     <div class="underheader uhleft undertitle">&nbsp;</div> 
     <div class="underheader uhright undertitle">&nbsp;</div> 
    </div> 

И CSS:

.undertitle { 
-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0); 
background-image:url(http://cereusbright.com/newsite/presskit/images/underheader.svg); 
} 

.underheader-wrapper { 
position: relative; 
margin: auto; 
width:320px; 
height:100px; 
} 

.underheader { 
-webkit-backface-visibility: hidden; 
position:absolute; 
width: 0px; 
height:100px; 
opacity: 0; 
background-size: 320px 60px; 
background-repeat: no-repeat; 
-moz-animation-delay: 3s; -webkit-animation-delay:3s; 
-moz-animation-duration: 3s; -webkit-animation-duration: 3s; 
-moz-animation-name: part1; -webkit-animation-name:part1; 
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards} 

.uhleft { 
background-position: -160px 40px; 
right: 160px; 
-webkit-backface-visibility: hidden; 
-moz-animation-delay: 3s; -webkit-animation-delay:3s; 
-moz-animation-duration: 3s; -webkit-animation-duration: 3s; 
-moz-animation-name: part2; -webkit-animation-name:part2; 
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards} 

.uhright { 
background-position: -160px 40px; 
left: 160px;} 

@-webkit-keyframes part1 { 
from { 
    width: 0px; 
    opacity: 0; 
} 
to { 
    width: 160px; 
    opacity: 1; 
}} 

@-webkit-keyframes part2 { 
from { 
    background-position:-160px 40px; 
    width: 0px; 

    opacity: 0; 
} 
to { 
    width: 160px; 
    background-position: 0px 40px; 
    opacity: 1; 
}} 

@-moz-keyframes part1 { 
from { 
    width: 0px; 
    opacity: 0; 
} 
to { 
    width: 160px; 
    opacity: 1; 
}} 

@-moz-keyframes part2 { 
from { 
    background-position:-160px 40px; 
    width: 0px; 
    opacity: 0; 
} 
to { 
    background-position: 0px 40px; 
    width: 160px; 
    opacity: 1; 
}} 

ли я застрял с этим дрожанием? Я уже сделал версию JQuery и обнаружил, что люди говорят, что CSS был более чистым/плавным, но дрожание все еще происходит.

Answer 1

Хорошо, не нашел способ использовать двойные div для достижения этой цели. Вместо этого я сделал что-то подобное.

<div class="outer"> 
    <div class="middle"> 
      <div class"inner"> 
      &nbsp 
      </div> 
     </div> 
</div> 

, а затем стиль их

.outer { 
position: relative; 
width:321px; 
height:100px; 
padding: 15px; 
} 

.middle { 
text-align: center; 
position: absolute; 
left: 160px; 
margin:auto; 
background-image:url(images/underheader.svg); 
background-position:center center; 
background-size: 320px 70px; 
background-repeat: no-repeat; 
/*all the animation stuff */ 
} 

.inner { 
position: relative; 
display: inline-block; 
width: 0px; 
height: 100px; 
/* all the animation stuff */ 
} 

Я тогда анимированный средний DIV от left:160px до left: 0px и внутренний ДИВ от width: 0px к width: 320px. Я использовал CSS анимации, хотя это может быть легко сделано с JQuery или Переходы CSS.

Answer 2

Задержка, которую вы видите на Chrome, задается -webkit-animation-delay:3s;. Измените его на -webkit-animation-delay:0s;, и вы увидите, что он сразу начнет исчезать.