Jitter trên hoạt ảnh css chrome

Question

Cố gắng tạo một hoạt ảnh css mờ dần trên một hình ảnh từ trung tâm bằng cách sử dụng hai div trung tâm có cùng hình nền [svg], và làm nổi bật chiều rộng và vị trí nền của chúng. Vấn đề là, trên chrome, có một vấn đề jitter khủng khiếp (Có lẽ từ chrome đi xe đạp qua các bước hoạt hình, thay vì làm chúng cùng một lúc?)

Đây là jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/, nơi bạn có thể thấy vấn đề jitter ở bên trái (có hình động chiều rộng đồng thời và hoạt ảnh nền-vị trí).

Mã liên quan (xin lỗi vì một số nội dung còn lại của trang web đó là in)

HTML:

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

Và 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; 
}} 

Tôi bị mắc kẹt với jitter này? Tôi đã làm một phiên bản JQuery, và thấy mọi người nói rằng CSS là sạch hơn/mượt mà hơn, nhưng jitter vẫn xảy ra.

Answer 1

Được rồi, không tìm cách sử dụng các div kép để đạt được mục tiêu này. Thay vào đó, tôi đã làm một cái gì đó như thế này.

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

và sau đó theo kiểu họ

.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 */ 
} 

sau đó tôi dưới hình dạng một div giữa left:160px-left: 0px và div bên trong width: 0px-width: 320px. tôi đã sử dụng hình ảnh động CSS, mặc dù nó có thể dễ dàng được thực hiện với jquery hoặc Chuyển tiếp CSS.

Answer 2

Độ trễ bạn thấy trên Chrome được cho bởi -webkit-animation-delay:3s;. Thay đổi nó thành -webkit-animation-delay:0s; và bạn sẽ thấy nó sẽ bắt đầu mờ dần ngay lập tức.