CSS Animation on :hover slow

by Kheema Pandey

HTML

<div id="animate-area">d</div>

CSS

#animate-area {
    width: 100px;
    height:100px;

background:url("http://lorempixel.com/100/100/");
    -webkit-animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    animation: animatedBackground 10s linear infinite;
}

@-webkit-keyframes animatedBackground {
    from { transform: rotate(0deg);
}
    to {  transform: rotate(360deg);
 }
}

@-moz-keyframes animatedBackground {
    from { transform: rotate(0deg);
}
    to {  transform: rotate(360deg);
 }
}

@keyframes animatedBackground {
    from { transform: rotate(0deg);
}
    to {  transform: rotate(360deg);
 }
}