xxxxxxxxxx
/* CSS Code for Rotation Animation */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Apply the animation to an element */
.element {
animation: rotate 2s linear infinite;
}
xxxxxxxxxx
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
CSS rotate on HOVER
xxxxxxxxxx
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
xxxxxxxxxx
/*all frames for rotation*/
@import = url("https://pastebin.com/raw/CStAV14T")
.rotate{
/* Start the rotate animation and make the animation last for 1 second */
animation: rotate 1s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
xxxxxxxxxx
/*This will shake the element from side to side.*/
@keyframes shake {
30% {
transform: rotate(20deg);
}
60% {
transform: rotate(-40deg);
}
}