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

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!

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