如何用CSS实现带图标显示的平滑展开过渡动画？

核心问题分析 #

你的代码里有两个导致过渡不平滑的关键问题：

1. 使用display: none/display: inline-flex切换图标显示状态——display属性不支持CSS过渡，会导致图标突然出现。
2. 悬停时设置width: auto，从fit-content切换到auto属于不确定值的宽度变化，无法产生平滑过渡。

CSS修复方案 #

不需要JavaScript，只需要调整CSS即可实现平滑效果，修改后的代码如下：

.read-further {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 0.50%;
  padding: 0.50%;
  /* 移除width: fit-content，让容器由内容自然撑开 */
  text-decoration: none;
  text-align: center;
  color: #ece5e0;
  background-color: #363945;
  border-radius: 44px;
  transition: all 0.25s ease-out;
  overflow: hidden;
  z-index: 1;
}

.read-further:hover {
  background-color: #bb4b42;
  box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  -webkit-box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  -moz-box-shadow: 0px 0px 8px 0px rgba(28, 28, 28, 0.5);
  /* 移除width: auto，避免宽度突变 */
}

.read-further a {
  z-index: 1;
  display: inline-flex;
  align-self: center;
  justify-self: center;
  color: #ece5e0;
  text-decoration: none;
}

.read-further i {
  /* 替换display: none为opacity和transform实现视觉隐藏 */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0% 0%;
  position: relative;
  color: #ece5e0;
  font-size: larger;
  margin-left: 8px; /* 用margin替代left，更符合flex布局 */
  z-index: 1;
  /* 添加过渡属性，实现平滑显示 */
  transition: all 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.read-further:hover > i {
  opacity: 1;
  transform: scaleX(1);
  /* 保留动画增强效果，也可直接用transition替代 */
  -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

关键修改说明 #

1. 替换display: none为opacity+transform：这两个属性支持CSS过渡/动画，能实现图标从隐藏到显示的平滑过渡，同时元素始终在DOM中，不会导致容器宽度突变。
2. 移除width: fit-content和width: auto：让flex容器根据内容自动调整宽度，配合图标的平滑显示，容器宽度会自然过渡，避免突然变化。
3. 用margin-left替代left：在flex布局中，使用margin控制间距比绝对定位的left更合理，也能避免布局偏移问题。
4. 保留动画增强效果：如果不需要动画，也可以直接用transition替代animation，只需要在hover时修改opacity和transform即可。

额外优化建议 #

原代码中<i href="" class="bi bi-arrow-right"></i>的href属性无效，因为<i>不是链接元素，建议移除该属性，或者将图标包裹在<a>标签内（如果需要点击跳转）。

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