how animation-direction works in css3 animation? - css

Question

As i understand, when i change the animation-direction from normal to reverse during a specific animation, the element will move towards the opposite direction right away starting from where it is now.But it seems i am wrong , here is the http://codepen.io/johnwaynerui/pen/bZvRLm When i click the reverse button, the circle does not turn around right away and moving towards the opposite direction. Are there something i misunderstand?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<div id="circle"></div>
<button id='reverse'>reverse</button>
#keyframes move-right {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(200px);
}
40% {
transform: translateX(400px);
}
60% {
transform: translateX(600px);
}
80% {
transform: translateX(800px);
}
100% {
transform: translateX(1000px);
}
}
#circle {
height: 50px;
width: 50px;
border-radius:25px;
background-color: teal;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: move-right;
-webkit-animation-iteration-count: infinite;
animation-fill-mode: both;
position:absolute;
left:30%;
top:20%;
}
#circle.reverse {
animation-direction: reverse;
}
$('#reverse').click(function () {
$('#circle').toggleClass('reverse');
});

Answer 1

You can check the documentation for animation-direction here.
It clearly states that, for a reverse value:
The animation plays backward each cycle. Each time the animation cycles, the animation resets to the end state and starts over again.
As per my understanding, the moment you add animation-direction: reverse; to your animation, it goes in reverse direction mode that means the end-point of original animation becomes its start-point and vice-versa. So, if your animation has run first 20% and you change its animation-direction to reverse its start and end-points get interchanged, and it suddenly jumps to the 20% point relative to these changed end-points. That's why you notice that your circle suddenly jumps to far right and then continues its movement towards left.
$('#reverse').click(function () {
$('#circle').toggleClass('reverse');
});
#keyframes move-right {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(200px);
}
40% {
transform: translateX(400px);
}
60% {
transform: translateX(600px);
}
80% {
transform: translateX(800px);
}
100% {
transform: translateX(1000px);
}
}
#circle {
height: 50px;
width: 50px;
border-radius:25px;
background-color: teal;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-name: move-right;
-webkit-animation-iteration-count: infinite;
animation-fill-mode: both;
position:absolute;
left:30%;
top:20%;
}
#circle.reverse {
animation-direction: reverse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<div id="circle"></div>
<button id='reverse'>reverse</button>