Page 1 of 1
Pause animation between each rotation
Posted: 27 Nov 2020, 07:21
by Marius
I have a Div that I want to rotate from 0 to 90 stop 2s, then continue from 90 to 180 then stop 2s .., to the 360 degrees.
Any idea of how can I add a pause of 2 seconds between each rotation?
Pause animation between each rotation
Posted: 27 Nov 2020, 08:16
by MarPlo
You can do that with CSS animations
transform: rotate(), like in the example below.
Set the rotation time to 12 seconds and start the 4 'transform' rotations with a difference of +5% than the previous one (that difference will be the pause).
The first definition is at 0%, the next is from 5% to 25%, then the next one starts at 30%, and so on.
Code: Select all
<style>
#div_id {
width: 90px;
height: 50px;
background: #abcdef;
animation: rotate-pause 12s infinite linear;
transform: rotate();
}
@keyframes rotate-pause{
0%{
transform: rotate(0deg);
}
5%, 25%{
transform: rotate(90deg);
}
30%, 50%{
transform: rotate(180deg);
}
55%, 75%{
transform: rotate(270deg);
}
80%, 100%{
transform: rotate(360deg);
}
}
</style>
<div id='div_id'>Div content..</div>
- Demo: