Can an "accelerate, then coast" animation be achieved with css?

Question

I'm wondering if it would be possible to achieve an "accelerate, then coast" animation with css, like in this 3D.js example

Basically, an object starts with 0 speed and accelerated its movement until a certain point, and after that, it keeps a constant speed.

I thought it could be accomplished by applying the rotation animation twice to the same element, but with different parameters: * first rotation: the object rotates during 2 seconds, with no delay, with an ease-in function; * after that: the object rotates during 1.5 seconds with a 2 seconds delay to account for the first rotation, with a linear function. This time the rotation repeats infinitely.

So I tried the following code

.square {
    width: 120px;
    height: 120px;
    background: #c00;
    -webkit-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    -moz-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    }
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform:rotate(360deg); }
}

I know it's not the same as the 3D.js example, but it's close enough. The problem is that the object stops a bit before finishing the first rotation and it looks really weird.

I've prepared a fiddle to show the problem: http://jsfiddle.net/e0sLc8sw/

Any idea?

Thanks everybody for your help!

Answer 1

is it not just because you have added 2 times to the second animation?

According to MDN, the second time entry is treated as an animation-delay, which tells the animation to start after that period of time.

Removing the 2s part from the animation works fine:

.square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    width: 100px;
    height: 100px;
    background: #c00;
    -webkit-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
    -moz-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
    animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform:rotate(360deg); }
}

<div class="square spinning">:D</div>

UPDATED FIDDLE

Answer 2

The previous examples don't work in modern Chrome (2018). Here's an updated example using a cubic bezier curve to handle the acceleration - you can play around with the acceleration parameters here.

The first animation handles the acceleration - the 3s here indicates it will get to the last frame after 3 seconds with the bezier acceleration function. It then terminates. The 3s in the second animation indicates this one begins exactly where the other one left off, ie it has a 3 second delay, but this one never terminates as it has "infinite" duration. It's much faster at 0.5 seconds.

Ideally the 0.5 second speed should be matched to the precise speed of the first animation caused by the Bezier acceleration. This is a manual calculation I don't think CSS helps with and I didn't perform here, just used an eye test.

.square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    width: 100px;
    height: 100px;
    background: #c00;
    animation:
        spin 3s cubic-bezier(.52,.29,.83,.13),
        spin 0.5s linear 3s infinite;
}

@keyframes spin { 
    100% { transform:rotate(360deg); }
}

<div class="square spinning">:D</div>