Is it possible to achieve "speed up then strands" with css?
I am wondering if it is possible to achieve a "speed up then take" animation with css like in this 3D.js example
Basically, an object starts at 0 speed and accelerates it to a certain point, and after that it maintains a constant speed.
I thought that this could be done by applying the rotation animation twice to the same element, but with different parameters: * first rotation: the object rotates for 2 seconds, without delay, with an easy switch function; * thereafter: the object rotates for 1.5 seconds with a 2 second delay to account for the first rotation with a linear function. This time, the rotation repeats endlessly.
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 this is not the same as the 3D.js example, but it's close enough. The problem is that the object stops a little before finishing the first turn and looks very strange.
I prepared a script to show the problem: http://jsfiddle.net/e0sLc8sw/
Any idea?
Thanks everyone for your help!
source to share
is it not just because you added 2 times to the second animation?
According to MDN , the second time entry is treated as animation-delay , which says the animation will start after that time period.
Removing a part 2s
from an animation works great:
.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>
source to share
The previous examples don't work in modern Chrome (2018). Here's an updated example using a cubic bezier curve to handle acceleration - you can play with the acceleration options here .
The first animation handles the acceleration - the 3s here indicates that it will go back to the last frame after 3 seconds using the accelerate bezier function. Then it ends. The 3s in the second animation indicate that this starts exactly where the other is left, i.e. Has a 3 second delay, but this one never ends as it has an "infinite" duration. It's much faster by 0.5 seconds.
Ideally, the 0.5 second speed should match the exact speed of the first animation caused by Bezier acceleration. This is a manual calculation. I don't think CSS helps and I didn't speak 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>
source to share