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

Разбираемся в CSS
Ответить
Anonymous
 Как увеличить скорость анимации вращения при наведении курсора с помощью 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»