Анимировать div при наведении

#css

Вопрос:

Я хотел бы повернуть div, когда курсор находится на div, как в этом видео.

Я хотел бы использовать ключевые кадры, потому что они более настраиваемы

 div.myElement {
    ...
    animation: mainMenu 2s infinite;
    animation-play-state: initial;
}

div.myElement:hover {
    animation-play-state: running;
}

@keyframes mainMenu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

Это не работает, но я не знаю, что мне нужно добавить в мои div.myElement и div.myElement:hover. В div.Элемент, это от 0% до 100% и от 100% до 0% для div.Элемент: наведение.

1. paused не initial

2. вы должны использовать animation-play-state: paused; на вашем div.myElement

3. Посмотрите видео раньше, я не хочу приостанавливать анимацию, когда она не наведена, я просто хочу перейти от 0% к 100% моих ключевых кадров, а при наведении 100% к 0%

Ответ №1:

У меня есть анимация окна, как у вас пример кода https://jsfiddle.net/gnox69pv/5 /

HTML

 <div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>

CSS

     div.myElement {

    background-color: red;
    height: 100px;
    width: 100px;
    margin:10px;
    animation: change_width_back 0.7s forwards;
}
div.myElement:hover {
    animation: change_width 0.7s forwards;
}
@keyframes change_width {
     0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
@keyframes change_width_back {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

Ответ №2:

попробуйте это:

 <!DOCTYPE html>
<html>
<head>
<style> 
div.myElement {
    width : 100px;
    height : 100px;
    background-color : red;
    transform: rotate(0deg);
    animation-play-state: initial;
}

div.myElement:hover {
	animation: mainMenu 2s infinite;
    animation-play-state: running;
}

@keyframes mainMenu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
</style>
</head>
<body>

<div class="myElement"></div>

</body>
</html>

и если вы хотите, чтобы окно оставалось на той же стадии, используйте это:

 <!DOCTYPE html>
<html>
<head>
<style> 
div.myElement {
    width : 100px;
    height : 100px;
    background-color : red;
    animation: mainMenu 2s infinite;
    animation-play-state: paused;
}

div.myElement:hover {
    animation-play-state: running;
}

@keyframes mainMenu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}
</style>
</head>
<body>

<div class="myElement"></div>

</body>
</html>

1. css animation-play-state: paused; animation-play-state: running; Повторите анимацию при наведении, посмотрите, что делает Ahmet (и это хорошо): jsfiddle.net/prbLhxud

2. Это работает нормально, если вы снова посмотрите на мой ответ, вы увидите, что есть два ответа. одним из них является анимация возврата к «0deg». а другая анимация «застревает» на градусе времени наведения. @Singularity Я не знал, что вам нужно, поэтому я опубликовал два ответа.