if you want to rotate inline elements, you should set the inline element to inline-block first.
i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }