动画div onHover

时间:2019-04-12 08:52:21

标签: css

我希望在光标位于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%。

2 个答案:

答案 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);
    }
}

答案 1 :(得分:0)

尝试一下:

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