CSS动画：悬停和悬停

Posted 2023-03-06

【中文标题】CSS动画：悬停和悬停

【英文标题】：CSS animation: hover-in and hover-out

【发布时间】：2021-04-02 20:22:24

【问题描述】：

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

悬停时：从 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>

【问题讨论】：

这能回答你的问题吗？ How to reverse an animation on mouse out after hover

【参考方案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>