Хочу вращать объект при наведение на него, но когда я отвожу стрелку от объекта, то оно начинает вращаться в обратную сторону. Можно ли сделать, чтобы обратного вращения не было? Буду очень благодарен за помощь!
3 ответа
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
У меня что-то такое получилось, но есть 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>
Или ещё проще:
.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>
-
-
@Qwertiy А зачем за автора гадать? Сейчас у него в вопросе "Можно ли сделать, чтобы обратного вращения не было?" при отводе курсора. Придет и выберет ответ, судя по всему твой, как самый красивый с градиентами :) Лови плюс (+) Commented 17 янв. 2022 в 18:42
-
Вполне возможно, что автор имел в виду то, что в ответе De.Minov - тут точно не угадаешь. У тебя вообще третья интерпретация, которая самая странная))) Ладно, держи плюсик)– Qwertiy ♦Commented 17 янв. 2022 в 18:44