Toniq Toniq - 9 months ago 62
CSS Question

Css3 transition queue

I am trying to queue css transition with same properties. Basically I want to translate an element to certain position (so transition duration 0) before I make another translate.

This is a mockup, click on move (box should move 100px right, before translate 100px left)

  1. this doesnt work because second transition overwrites first?

  1. This works (I needed transition duration non zero (0.01) otherwise transitionend doesnt fire).

There is another problem that transition end fires 2 times on chrome, but I could fix that, I was just wondering is there a better way to write this?

I would prefer if I could write this without end event or timer if possible?

<div class="box"></div>
<a href="#" class="move">move</a></a>

Answer Source


You can use CSS3 animation property with @keyframes.

.box.animate {
  animation: move 2s;

@keyframes move {
  0% {
    transform: translate(100px);
  100% {
    transform: translate(0px);

And to make the box move you can add class animate to your element. Or you can set animation property yourself in javascript, it's up to you.