我有一个div,我在其中制作动画内容:
#container {
position: relative;
width: 100px;
height: 100px;
border-style: inset;
}
#content {
visibility: hidden;
-webkit-animation: animDown 1s ease;
position: absolute;
top: 100px;
width: 100%;
height: 100%;
background-color: lightgreen;
}
#container:hover #content {
-webkit-animation: animUp 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animUp {
0% {
-webkit-transform: translateY(0);
visibility: hidden;
opacity: 0;
}
100% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
}
@-webkit-keyframes animDown {
0% {
-webkit-transform: translateY(-100%);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: …编辑：这与本文不同，如何将鼠标悬停后如何在鼠标移出时反转动画。不同之处在于，在这种情况下，过渡状态（进展程度）至关重要，这与前面提到的完全忽略过渡的职位不同。
TL; DR：动画结束后，如何将元素动画化/转换回其原始状态？
你好，
我正在尝试制作动画面板，以使其在悬停时“浮动”。我的问题是鼠标离开面板，而不是过渡回其原始状态，而是立即跳回。
可以在下面的代码段中找到它的简化版本。
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 50px;
height: 50px;
background-color: red;
}
div:hover {
animation: float 2s infinite ease;
}
@keyframes float {
0%, 100% {
transform: none;
}
50% {
transform: translateY(-20px);
}
}<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>如您所见，浮动会触发类似于浮动动作的平滑动画，但是，由于鼠标离开该框而动画突然停止，动画突然中断。
所以我的问题是：有没有一种方法可以让盒子过渡到其原始状态，最好不要使用JavaScript（尽管所有建议都值得赞赏）。
（这可能已经在网上的某个地方得到了回答，如果是这种情况，那么我真的很抱歉，但是我一直无法找到解决问题的合适方法。如果找到合适的解决方案，请添加副本。）
谢谢。
我尝试制作一个在悬停和悬停时触发的动画。我没有使用过渡属性，因为动画非常复杂。
悬停输入工作完美，但悬停输出始终在启动时运行。当悬停时它应该动画。
然后尝试设置 CSS var --anim-hover-out: none，这样启动时就没有动画了。然后，在悬停结束时设置--anim-hover-out: hover-out，以便悬停动画现在可以播放了。但是在里面设置 CSS var@keyframes不起作用。
目标是：.test:not(:hover):has-hover { do hover-out animation }
注意：没有 JavaScript，只有纯 CSS。
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
div {
background: #eee;
margin: 0 auto;
width: 200px;
padding: 100px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px …