TAG
CSS
Result
Run
License
<p>Mouse rollover then Start rotation after 2 seconds.</p> <div class="target"> Mouse rollover here! </div>
p { height: 220px; overflow: hidden; } @keyframes myani { form { transform: rotate(0); } to { transform: rotate(360deg); } } .target { width: 200px; height: 100px; background: red; border-radius: 50%; line-height: 100px; text-align: center; color: #FFF; position: absolute; left: calc(100% / 2 - 100px); top: calc(100% / 2 - 50px); } .target:hover { animation-name: myani; animation-duration: 2s; animation-delay: 2s; }
Console
expand_less
License
License
by DevDic
Close