Как увеличить скорость анимации вращения при наведении курсора с помощью CSS? ⇐ CSS

[Anonymous]

Мой логотип крутится на [моем веб-сайте][1]. Когда я навожу на него мышь, я бы хотел, чтобы он вращался быстрее и плавнее. В тот момент, когда я навожу курсор на логотип, он просто возвращается к исходному вращению, а затем начинает новое вращение быстрее. Я бы хотел, чтобы логотип увеличивал и уменьшал скорость при наведении курсора, не возвращаясь к исходному вращению.

Это мой логотип:





А вот текущий CSS:

#logo{
padding:5px;
-webkit-animation: spin 5s linear infinite;
animation: spin 5s linear infinite;
-moz-animation:spin 5s linear infinite;
}

#logo:hover{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
}

@-webkit-keyframes spin{
100% { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes spin{
100% { -moz-transform: rotate(-360deg); }
}
@keyframes spin{
100% { transform: rotate(-360deg); }
}


Подробнее здесь: https://stackoverflow.com/questions/510 ... d-with-css