CSS动画:悬停在里面和悬停在外面

Question

我试图制作一个悬停和悬停时触发的动画。我没有使用transition属性，因为动画非常复杂。

• 悬停时：从100%放大元素=>150%＝>130%
• 悬停时：将元素从130%=>80%＝>100%

悬停输入工作得很好，但悬停输出总是在启动时运行。它应该在悬停时设置动画。

然后尝试设置CSS变量--anim-hover-out: none，因此在启动时没有动画。然后，在悬停输入结束时，设置--anim-hover-out: hover-out，这样悬停输出动画现在就可以播放了。但是在@keyframes中设置CSS变量并没有起作用。

目标是：.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 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
:root {
--anim-hover-out: unset;
}
.test:not(:hover) {
animation-name: var(--anim-hover-out);
animation-duration: 500ms;
animation-fill-mode: both;
}
.test:hover {
animation-name: hover-in;
animation-duration: 500ms;
animation-fill-mode: both;
}
@keyframes hover-in {
0: {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1.3);
--anim-hover-out: hover-out;
}
}
@keyframes hover-out {
0: {
transform: scale(1.3);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}

<div class="test">Hello World!</div>

Answer 1

如果不使用JavaScript，就无法设置此项

因为即使手动定义动画名称，动画也会立即触发。

• 所以事后设置它不是一个解决方案。在重要的(onmouseleave(事情之后，你必须重新安排

另请参阅代码段

工作的完整示例

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 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
:root {
--anim-hover-out: hover-out-fake;
}
.test:hover {
animation-name: hover-in;
animation-duration: 500ms;
animation-fill-mode: both;
}
.test {
animation-name: var(--anim-hover-out);
animation-duration: 500ms;
animation-fill-mode: both;
}
@keyframes hover-in {
0: {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1.3);
--anim-hover-out: hover-out;
}
}
@keyframes hover-out {
0: {
transform: scale(1.3);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}

<div class="test" onmouseleave="document.documentElement.style.setProperty('--anim-hover-out', 'hover-out')">Hello World!</div>

Answer 2

您可以通过在页面加载的初始阶段隐藏您的内容

body{
animation-name: loading;
animation-duration: 500ms;
animation-fill-mode: both;
}
@keyframes loading {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}

它将在页面初始化时执行悬停动画时隐藏您的项目。如果您想避免等待，那么您可以将动画附加到类，如.hovered和.blurred，并通过Javascript切换它们。如果为其中一个元素隐藏body太多，那么您可以将另一个div包裹在您的div周围，并为该div指定此动画。

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 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
:root {
--anim-hover-out: unset;
}
body{
animation-name: loading;
animation-duration: 500ms;
animation-fill-mode: both;
}
@keyframes loading {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.test:not(:hover) {
animation-name: hover-out;
animation-duration: 500ms;
animation-fill-mode: both;
}
.test:hover {
animation-name: hover-in;
animation-duration: 500ms;
animation-fill-mode: both;
}
@keyframes hover-in {
0: {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1.3);
--anim-hover-out: hover-out;
}
}
@keyframes hover-out {
0: {
transform: scale(1.3);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}

<div class="test">Hello World!</div>