Jitter su animazioni CSS cromo

Cercando di creare un’animazione css che si dissolva in un’immagine dal centro usando due div centrati con la stessa immagine di sfondo [svg], e animando la loro larghezza e la posizione dello sfondo. Il problema è che, in Chrome, c’è un terribile problema di jitter (forse dal chrome che cicla attraverso i passi dell’animazione, invece di farlo simultaneamente?)

Ecco il jsfiddle: http://jsfiddle.net/evankford/s2uRV/4/ , dove è ansible vedere il problema di jitter su quello di sinistra (che ha animazione di larghezza simultanea e animazione di posizione di sfondo).

Codice pertinente (mi dispiace per alcune cose rimanenti dal sito in cui è)

HTML:

 
 

E 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; }} 

Sono bloccato con questo jitter? Ho già fatto una versione di JQuery e ho trovato persone che dicevano che i CSS erano più puliti / più fluidi, ma il jitter continua ancora.

Ok, non ho trovato il modo di usare il doppio div per raggiungere questo objective. Invece, ho fatto qualcosa di simile.

 
&nbsp

e poi li ha stilizzati

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

Ho quindi animato il div intermedio da left:160px a left: 0px e il div interno da width: 0px a width: 320px. width: 0px width: 320px. Ho usato l’animazione CSS, anche se potrebbe facilmente essere fatto con transizioni jquery o CSS.

Il ritardo che vedi su Chrome è dato da -webkit-animation-delay:3s; . -webkit-animation-delay:0s; in -webkit-animation-delay:0s; e vedrai che inizierà a dissolversi immediatamente.