I've been struggling once again to grasp the concept of CSS animations, particularly the rotate animation. I'm trying to create an effect where an image rotates back and forth on hover, but for some reason it only starts rotating after shifting to the bottom left. Despite my efforts to find a solution online, I haven't come across any answers explaining why this occurs or how to fix it.
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img:hover {
animation-name: freakout;
animation-duration: .5s;
animation-iteration-count: infinite;
}
@keyframes freakout {
0%, 100% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg);
/* Chrome, Safari, Opera */
transform: rotate(7deg);
}
}<img src="http://www.swimwithamanatee.biz/normal_ian-symbol-trichechus-spp22_left.png" />