CSS动画：悬停和悬停

Question

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

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

悬停效果很好，但悬停总是在启动时运行。 它应该在悬停时进行动画处理。

然后尝试设置 CSS var --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) 之后，您必须重新设置它。

另见 sn-p

一个完整的例子

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>