Why do translate3d animations pause for ease timer functions? - css

Question

Have a look at this jsfiddle.
I'm using translate3d transformations with a timer function of 'ease':
#keyframes anim {
from {
transform:translate3d(0px, 0px, 0px);
}
50% {
transform:translate3d(100px, 100px,-100px);
}
to {
transform:translate3d(200px, 200px, 0px);
}
}
Why is it not a continuous animation, instead of pausing in the middle? This only happens when using ease-* as the timer function. Is this intended behaviour? If so, how can I make it a continuous animation?

Answer 1

In an animation using keyframes, the timing function is applied to every transition between keyframes.
You can set the timing function at the keyframe, or at the animation; that doesn't change the fact that those are separate functions.
That means that there is not a function that can achieve ease for the full animation easily. (it is fun that it is not easy to get ease :-) )
Since you have only two transitions (3 keyframes), however, an approximate alternative is to set ease-in for the first transition, and ease-out for the second.
For three transitions, the one in the middle would be linear
#-webkit-keyframes anim {
from {
-webkit-transform:translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: ease-in;
}
50% {
-webkit-transform:translate3d(100px, 100px,-100px);
-webkit-animation-timing-function: ease-out;
}
to {
-webkit-transform:translate3d(200px, 200px, 0px);
}
}
fiddle
Notice that there is no timing function to be applied to the last keyframe, because that is applied to the interval and not to the keyframe.

Answer 2

Is this intended behavior?
Yes, that's how the ease-* timing function(s) are suppose to work.
Here is a visual taken from this MDN documentation on animation timing functions.
ease represents the timing function cubic-bezier(0.25, 0.1, 0.25, 1.0)
How can I make it a continuous animation?
Use linear, which represents the timing function cubic-bezier(0.0, 0.0, 1.0, 1.0)
Updated CSS
#a {
animation: anim 1s linear infinite alternate;
-webkit-animation: anim 1s linear infinite alternate;
}
UPDATED EXAMPLE