Toniq Toniq - 1 month ago 12
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?



https://jsfiddle.net/aqwaypoh/3/


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



https://jsfiddle.net/dpv3xzth/5/

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

Update:

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.

box.addClass('animate')

jsfiddle: https://jsfiddle.net/aqwaypoh/7/

Comments