CSS3 Rotation Snapback

Question

Я пытаюсь создать игрушку с небольшим весельем, чтобы играть на моем веб-сайте, в основном, когда вы наводите логотип, он вращается, пока вы не удалите курсор. Я достиг этого, используя rotate в CSS3, и он работает. Но мне было интересно, если есть способ, чтобы предотвратить «SNAPBACK» (Плавно вернуть его в исходное положение, когда вы unhover вместо этого просто прыгает обратно мгновенно)

Код, я использую это:

#logo1:hover{ 
    -webkit-animation: spin 0.7s infinite linear; 
-moz-animation: spin 0.7s infinite linear; 
-o-animation: spin 0.7s infinite linear; 
-ms-animation: spin 0.7s infinite linear; 
} 
@-webkit-keyframes spin { 
0% { -webkit-transform: rotate(0deg);} 
100% { -webkit-transform: rotate(360deg);} 
} 
@-moz-keyframes spin { 
0% { -moz-transform: rotate(0deg);} 
100% { -moz-transform: rotate(360deg);} 
} 
@-o-keyframes spin { 
0% { -o-transform: rotate(0deg);} 
100% { -o-transform: rotate(360deg);} 
} 
@-ms-keyframes spin { 
0% { -ms-transform: rotate(0deg);} 
100% { -ms-transform: rotate(360deg);} 
} 

im благодарен за любую помощь!

Answer 1

Что вы пытаетесь можно легко осуществить просто с помощью CSS3 преобразований, анимация здесь не требуется, как вы начинаете от 0 до 360 градусов, так попробуйте это

.class { 
    -moz-transform: rotate(0deg); 
    /* Add up other required proprietary properties here */ 
    transition: all 1s; /* This will handle the transition to be 
          smooth on mouse out */ 
} 

.class:hover { 
    -moz-transform: rotate(360deg); 
    /* Add up other required proprietary properties here and 
     transition property is not required here */ 
}