3

Хочу вращать объект при наведение на него, но когда я отвожу стрелку от объекта, то оно начинает вращаться в обратную сторону. Можно ли сделать, чтобы обратного вращения не было? Буду очень благодарен за помощь!

3 ответа 3

5

animation-play-state изначально paused, а при :hover ставите running

.rotate {
  display: block;
  width: 150px;
  height: 150px;
  background: red;
  animation: Rotate 1s linear infinite paused;
}

.rotate:hover {
  animation-play-state: running;
}

@keyframes Rotate {
  from {
    transform: rotate(1turn);
  }
}
<div class="rotate"></div>

2
  • Блин.. Я совершенно по-другому вопрос понял...
    – Qwertiy
    17 янв 2022 в 18:35
  • 2
    @Qwertiy, да чёт как-то все по разному поняли :D
    – De.Minov
    17 янв 2022 в 18:43
4

У меня что-то такое получилось, но есть 2 проблемы:

  1. При открытии страницы есть лишний оборот.
  2. Надо держать мышь достаточно долго, чтобы анимация hover завершилась.

div {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: linear-gradient(yellow, red, blue);
  animation: rotate-2 1s linear 1;
}

div:hover {
  animation-name: rotate-1;
  animation-fill-mode: forwards;
}

@keyframes rotate-1 {
  from { transform: rotate(  0deg) }
  to   { transform: rotate(180deg) }
}

@keyframes rotate-2 {
  from { transform: rotate(180deg) }
  to   { transform: rotate(360deg) }
}
<div></div>

Первый пункт могу исправить с помощью элемента-обёртки, но при наведении в первую секунду после открытия анимация будет глючить:

section {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  animation: rotate-1 1s linear 1 reverse;
}

div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(yellow, red, blue);
  animation: inherit;
  animation-name: rotate-2;
  animation-direction: normal;
}

div:hover {
  animation-name: rotate-1;
  animation-fill-mode: forwards;
}

@keyframes rotate-1 {
  from { transform: rotate(  0deg) }
  to   { transform: rotate(180deg) }
}

@keyframes rotate-2 {
  from { transform: rotate(180deg) }
  to   { transform: rotate(360deg) }
}
<section>
  <div></div>
</section>

И ещё один вариант, но мышь по-прежнему надо держать над блоком до завершения первого поворота:

div {
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: linear-gradient(yellow, red, blue);
  transition: transform 1s linear;
  transform: rotate(0deg);
}

div:hover {
  transform: rotate(-180deg);
  animation: rotate 1s linear 1;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
<div></div>

2

Или ещё проще:

.rotate {
  display: block;
  width: 50px;
  height: 50px;
  background:yellowgreen;
 
}

.rotate:hover {
   animation: move 1s linear infinite;
}

@keyframes move {
  100% {
    transform: rotate(720deg);
  }
}
<div class="rotate"></div>

3
  • А вот тут я на почти уверен, что автор хотел не это)
    – Qwertiy
    17 янв 2022 в 18:35
  • @Qwertiy А зачем за автора гадать? Сейчас у него в вопросе "Можно ли сделать, чтобы обратного вращения не было?" при отводе курсора. Придет и выберет ответ, судя по всему твой, как самый красивый с градиентами :) Лови плюс (+) 17 янв 2022 в 18:42
  • Вполне возможно, что автор имел в виду то, что в ответе De.Minov - тут точно не угадаешь. У тебя вообще третья интерпретация, которая самая странная))) Ладно, держи плюсик)
    – Qwertiy
    17 янв 2022 в 18:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.