CSS)悬停在动画上

Question

在移动的盒子中，我想做一个动画，当我抬起鼠标时，它会倒过来。我想用关键帧实现盒子的移动，并指定悬停，但它不起作用。

我该怎么办?

#www{
background-color: black;
position: absolute;
left: 0;
top: 0;
animation: www 5s infinite;
transition: 1s;
}
#www:hover{
transform: rotate(180deg);
}
@keyframes www{
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {transform: translateX(0vw);}
}

<div class="box" id="www">WWW</div>

Answer 1

您可以使用容器同时具有transformation属性，因为您无法在同一元素上使用不同的triggers(hoverautomatic)实现不同的transform

下面使用的样式仅用于说明(易于理解)，您可以根据需要使用，如果需要，可以使用transparentbackground

function func() {
document.getElementById("www").style.transform = "rotate(180deg)"
}

#www {
background-color: black;
transition: 1s transform;
animation: www 10s infinite;
width: fit-content;
}
@keyframes www {
0% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
100% {
transform: translateX(0vw);
}
}
.box1 {
transition: 1s;
background-color: red;
margin-top: 100px;
width: fit-content;
}
.box1:hover {
transform: rotate(180deg)
}

<div class="box" id="www" onclick="func()">
<div class="box1">WWW</div>
</div>