jquery - Why is this CSS3 transition glitchy? -

i'm having glitchy css3 transition. i'm using filament responsive carousel , have basic slides made of image, title <hr> , subtitle. what's happening old titles don't transition off screen until after new titles transition in. looks glitchy, , can't seem figure out why it's happening.

now made jsfiddle, see same thing happening images, on site, z-index changing hiding behavior behind new image. think prefer no transition @ on titles / images 'leaving'.

there's lot of code, , .js script changes dynamically, made jsfiddle. can see glitchy behavior there. javascript applies styles transitioning slide indicated , relatively self-explanatory in css, head on fiddle if need more specificity.

the basic html looks this:

<div class="carousel" data-transition="slide">     <div class="slide">         <img src="myimage.gif" />         <h1>slide 1</h1>         <hr />         <h5>subtitle 1</h5>     </div>     <div class="slide">         <img src="myimage2" />         <h1>slide 2</h1>         <hr />         <h5>subtitle 2</h5>     </div>     <div class="slide">         <img src="myimage3" />         <h1>slide 3</h1>         <hr />         <h5>subtitle 3</h5>     </div> </div> 

the css looks this:

.carousel-slide {     position: relative;     overflow: hidden;     -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); } .carousel-slide .carousel-item {     position: absolute;     left: 100%;     top: 0;     width: 100%; /* necessary non-active slides */     display: block; /* overrides basic carousel styles */     z-index: 1;     -webkit-transition: left .2s ease;     -moz-transition: left .2s ease;     -ms-transition: left .2s ease;     -o-transition: left .2s ease;     transition: left .2s ease; } .carousel-no-transition .carousel-item {     -webkit-transition: none;     -moz-transition: none;     -ms-transition: none;     -o-transition: none;     transition: none; } .carousel-slide .carousel-active {     left: 0;     position: relative;     z-index: 2; } .carousel-slide .carousel-in {     left: 0; } .carousel-slide-reverse .carousel-out {     left: 100%; } .carousel-slide .carousel-out, .carousel-slide-reverse .carousel-in {     left: -100%; } .carousel-slide-reverse .carousel-item {     -webkit-transition: left .1s ease;     -moz-transition: left .1s ease;     -ms-transition: left .1s ease;     -o-transition: left .1s ease;     transition: left .1s ease; } .carousel-slide-reverse .carousel-active {     left: 0; } 

can help?

there couple of things should explore:

firstly, it can more performant transition transforms instead of box model properties (eg. left, top, etc), eg:

-webkit-transition: -webkit-transform 0.2s ease; 

then position them off screen using using:

.carousel-item {     -webkit-transform: translatex(100%); } 

or, if prefer:

.carousel-item {     -webkit-transform: translate3d(100%, 0, 0); } 

the issue carousel item ghosting across because still being transitioned it's resting position when should instantaneous. can setting transition timing 0s, eg:

.carousel-item-instant {     -webkit-transition-duration: 0s; } 

i see have a:

-webkit-transition: none; 

class doesn't seem being applied correctly. you'll need listen transition end event , apply the

.carousel-item-instant 

class appropriate carousel item. note you'll have remove again once time carousel item animate again.