Menu
I want to rotate a graphic element infinitely but with some time interval by step.
For example, rotate 90 degree (smooth animation) then after 5 secs rotate another 90 degree and repeat the same infinitely.
Can this be done using only css?
Here is my JS BIN
369
Pretty simple. The following code limits the transformation to keyframes 40%-60% (one fifth of the entire duration). So, if we give 6 seconds to the entire animation, 1.2s will be used for movement and 4.8s will be used for delay. You can play with it to get more accurate numbers.
@-webkit-keyframes rotation {
0%, 40% {-webkit-transform: rotate(0deg);}
60%, 100% {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
0%, 40% { transform: rotate(0deg); }
60%, 100% { transform: rotate(90deg); }
}
.wrapper a:last-child div {
-webkit-animation: rotation 6s infinite linear;
animation: rotation 6s infinite linear;
}
@-webkit-keyframes rotation {
0%, 40% {-webkit-transform: rotate(0deg);}
60%, 100% {-webkit-transform: rotate(90deg);}
}
@keyframes rotation {
0%, 40% { transform: rotate(0deg); }
60%, 100% { transform: rotate(90deg); }
}
.wrapper {
position: relative;
}
.wrapper a:first-child div{
position: absolute;
width:25px;
height:25px;
top: 13px;
left: 13px;
background: red;
z-index: 100;
}
.wrapper a:last-child div {
width:50px;
height:50px;
position: relative;
background: orange;
-webkit-animation: rotation 6s infinite linear;
animation: rotation 6s infinite linear;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<a href="#"><div></div></a>
<a href="#"><div></div></a>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
