Logo rotation on hover - SVG & CSS

HTML
<div id="logo"> <svg id="logo--svg" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><title>logo</title><path d="M0,91C0,57.84,11.47.24,53.46,0.24c7.79,0,14.07,5,17.31,11.28L72.93,0h31.38L77.91,139.2C71.42,173.52,52.81,180,38.52,180A25.48,25.48,0,0,1,13,154.08c0-21.84,16-25.44,36.14-29.76l2.6-13c-6.49,5.76-14.93,10.08-24.89,10.08C6.06,121.44,0,105.12,0,91Zm33.54,67.68c4.55,0,10-4.56,12.77-18.72L47.83,132c-13.64,2.64-22.94,5.76-22.94,18.72C24.89,154.08,28.78,158.64,33.54,158.64ZM26.62,86.4c0,11.52,6.28,15.12,15.8,15.12,4.11,0,8.44-3.36,12.55-7.92L68.38,24c-3.46-7.2-8.87-10.32-12.55-10.32C34.84,13.68,26.62,65.76,26.62,86.4Z" style="fill:#ff324a"></path><path d="M180,89c0,33.12-11.47,90.72-53.46,90.72-7.79,0-14.07-5-17.31-11.28L107.07,180H75.69l26.4-139.2C108.58,6.48,127.2,0,141.48,0A25.48,25.48,0,0,1,167,25.92c0,21.84-16,25.44-36.14,29.76l-2.6,13c6.49-5.76,14.93-10.08,24.89-10.08C173.94,58.56,180,74.88,180,89ZM153.38,93.6c0-11.52-6.28-15.12-15.8-15.12-4.11,0-8.44,3.36-12.55,7.92L111.62,156c3.46,7.2,8.87,10.32,12.55,10.32C145.16,166.32,153.38,114.24,153.38,93.6Zm-6.92-72.24c-4.55,0-10,4.56-12.77,18.72L132.17,48c13.64-2.64,22.94-5.76,22.94-18.72C155.12,25.92,151.22,21.36,146.46,21.36Z" style="fill:#ff324a"></path> </svg> </div>
CSS
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } body { background-color: #ededed; } #logo { display: block; height: 150px; width: 150px; padding: 50px; border-radius: 50%; margin: 200px auto; background-color: #FFF; cursor: pointer; } #logo:hover { -webkit-animation:spin .5s ease-out .1s; -moz-animation:spin .5s ease-out .1s; animation:spin .5s ease-out .1s; }
JAVASCRIPT
Expand for more options Login