CSS transition chaining: timing issue in Opera

A Former User

I am working on a slide show, where each old image slides off-screen to the right, followed by a new image sliding in from the left. I managed to get this working by chaining three transitions, through a webkitTransitionEnd handler: 1. slide image off-screen to the right, and replacing the image by the next; 2. jump image from the right to the left, off-screen; 3. slide image on-screen from the left.

This works in Firefox, but in Opera and Chrome the new image slides in from the right. The essence of the technique, with text label instead of image: (see CodePen).

<html>
<head>
<meta charset="utf-8" />
<title>Testing</title>

<style>

p{
margin: auto;
width: 100%;
}

.center{
transform: translate(50%,0);
transition: transform linear 0.5s;

}

.left{
transform: translate(0%,0);
transition: transform step-end 1ms;
}

.right{
transform: translate(110%,0);
transition: transform linear 0.5s;
}

</style>

</head>

<body>

<p class="center" id="label">count 0</p>
<button type="button" onclick="next()">Next</button>

/* Start the state automaton */

function next(){

  label.classList.remove('center');
  label.classList.add('right');

}

/* State automaton:
from the right, jump to the left
from the left, slide to the center */

function slide(){

  if(label.classList.contains('right')){
     // slide out
     label.classList.remove('right');
     label.classList.add('left');
     // next counter
     counter++;

// alert('here');
label.innerHTML="count "+counter;
} else
if(label.classList.contains('left')){
// slide in
label.classList.remove('left');
label.classList.add('center');
} else {
// stop automaton
}

}

document.getElementById('label').addEventListener( 'webkitTransitionEnd', slide, false );

</script>

</body>
</html>

I suspect the jump to the left is optimised out in Opera and Chrome. Adding back the javascript alert, currently commented out, restores the intended slide from the left.

Two questions: 1. What is going on here? Is it a bug in Opera/Chrome, or am I more or less lucky to get this chaining to work in Firefox? 2. Is there a better technique to implement this slideshow functionality?

A Former User

Your problem is neither linux specific, nor opera specific. It seems to me like an issue all chromium-based browsers have, so you should ask elsewhere.