Continuous CSS rotation animation on hover
Continuous CSS rotation animation on hover
by rajnishw3
HTML
<div class="buddha-image">
<img id="circle" src="http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Floral-Circle-Border-PNG-Image.png">
</div>
CSS
.buddha-image{
width: 250px;
height: 250px;
}
.buddha-image #circle{
width: 100%;
height: 100%;
}
.buddha-image:hover #circle{
-webkit-animation: rotation 6s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}