如何用CSS实现子元素hover时带动画的缩放显示与隐藏？

直接用CSS伪类结合关键帧动画就能实现，核心是利用:hover控制动画触发，配合animation-fill-mode保持动画结束后的状态。

1. 先定义两个关键帧动画 #

@keyframes Growth {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes Shrink {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

2. 设置基础样式 #

给父元素.wrapper__shopcart设置相对定位，确保子元素模态框能基于它定位；给.wrapper__shopcart-modal设置默认隐藏状态，同时指定动画的基础参数：

.wrapper__shopcart {
  position: relative;
  /* 可按需添加宽度、高度、cursor: pointer等样式 */
}

.wrapper__shopcart-modal {
  position: absolute;
  /* 按需调整位置，比如top: 100%, right: 0 */
  top: 100%;
  right: 0;
  transform: scale(0);
  opacity: 0;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

3. 实现hover交互 #

通过:hover和:not(:hover)伪类分别触发显示、隐藏动画：

/* 鼠标悬停时，模态框执行Growth动画 */
.wrapper__shopcart:hover .wrapper__shopcart-modal {
  animation-name: Growth;
}

/* 鼠标移开时，模态框执行Shrink动画 */
.wrapper__shopcart:not(:hover) .wrapper__shopcart-modal {
  animation-name: Shrink;
}

补充优化（可选） #

如果担心页面初始加载时模态框闪显，可以给模态框加上visibility属性，配合动画控制可见性：

@keyframes Growth {
  from {
    visibility: visible;
    transform: scale(0);
    opacity: 0;
  }
  to {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes Shrink {
  from {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
  }
  to {
    visibility: hidden;
    transform: scale(0);
    opacity: 0;
  }
}

.wrapper__shopcart-modal {
  /* 其他样式不变 */
  visibility: hidden;
}

内容的提问来源于stack exchange，提问作者user21960224