Я хочу повернуть элемент 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.Element, это от 0% до 100% и от 100% до 0% для div.Element: hover.

css
0
Singularity 12 Апр 2019 в 11:52

2 ответа

Лучший ответ

У меня есть анимация коробки, как вы пример кода 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);
    }
}
1
errorau 12 Апр 2019 в 09:14

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

<!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>
0
tomer raitz 12 Апр 2019 в 09:08