CSS动画需求：水平扩展线条动画停止时添加两端竖线

实现思路 #

核心是等水平线条的扩展动画结束后，在两端显示竖线。可以用两种方式实现：一种是通过JS监听动画结束事件，给线条加状态类来显示竖线；另一种是纯CSS通过动画关键帧同步控制竖线的显示状态。

推荐方案（JS监听，兼容性更强） #

HTML结构

沿用你现有的线条容器即可：

<div class="expanding-line"></div>

CSS样式

.expanding-line {
  width: 0;
  height: 2px;
  background: #333;
  position: relative;
  margin: 40px auto;
  /* 动画结束后保持最终状态 */
  animation: expandLine 2s ease forwards;
}

/* 先定义两端竖线的基础样式，默认隐藏 */
.expanding-line::before,
.expanding-line::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px; /* 竖线高度可按需调整 */
  background: #333;
  top: 50%;
  /* 让竖线垂直居中 */
  transform: translateY(-50%);
  opacity: 0;
  /* 加个淡入过渡更自然 */
  transition: opacity 0.2s ease;
}

/* 左边竖线贴线条左端 */
.expanding-line::before {
  left: 0;
}

/* 右边竖线贴线条右端 */
.expanding-line::after {
  right: 0;
}

/* 动画结束后添加的类，用来显示竖线 */
.expanding-line.line-complete::before,
.expanding-line.line-complete::after {
  opacity: 1;
}

/* 水平扩展的动画关键帧 */
@keyframes expandLine {
  to {
    width: 80%; /* 线条最终宽度，可自行修改数值 */
  }
}

JS代码

监听动画结束事件，给线条加上显示竖线的类：

const line = document.querySelector('.expanding-line');
line.addEventListener('animationend', () => {
  line.classList.add('line-complete');
});

纯CSS方案（无需JS） #

如果不想写JS，也可以直接在动画关键帧里控制竖线的显示：

.expanding-line {
  width: 0;
  height: 2px;
  background: #333;
  position: relative;
  margin: 40px auto;
  animation: expandWithEnds 2s ease forwards;
  /* 用CSS变量控制竖线透明度 */
  --end-opacity: 0;
}

.expanding-line::before,
.expanding-line::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: #333;
  top: 50%;
  transform: translateY(-50%);
  opacity: var(--end-opacity);
}

.expanding-line::before { left: 0; }
.expanding-line::after { right: 0; }

@keyframes expandWithEnds {
  0% {
    width: 0;
    --end-opacity: 0;
  }
  /* 前95%时间只扩展线条，不显示竖线 */
  95% {
    width: 80%;
    --end-opacity: 0;
  }
  /* 最后阶段显示竖线 */
  100% {
    width: 80%;
    --end-opacity: 1;
  }
}

注意事项 #

• 可以根据参考图调整竖线的高度、线条的颜色、最终宽度这些参数，匹配需求。
• JS方案兼容性更好，适合老浏览器；纯CSS方案需要浏览器支持CSS变量，现代浏览器都能正常运行。

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