Question

我希望在光标位于this video中的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中，它是div.Element：hover的0％至100％和100％至0％。

Answer 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);
    }
}

Answer 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>

动画div onHover

2 个答案: