求助：hr标签左右循环动画失效且无法居中于h2下方

问题根源 #

• 动画属性顺序错误：原代码中animation: alternate hr 19s infinite;的属性值顺序不符合CSS规范，正确顺序应为动画名称 时长 循环次数 方向，顺序错误会直接导致动画不生效。
• keyframes混用冲突属性：在相对定位元素的动画中，同时修改left和right会触发布局计算冲突，无法形成平滑的左右移动过渡效果。
• 硬编码定位导致居中失效：用left:900px这种固定数值定位hr，既无法适配不同屏幕尺寸，也不能保证它稳定处于h2下方居中位置。

修正后的完整代码 #

HTML（调整结构让hr与h2关联）

<div class="div-projects">
  <h2>Projects</h2>
  <hr class="hr-projects">
</div>

CSS（修复动画与定位问题）

.div-projects {
  margin-top: 200px;
  display: flex;
  flex-direction: column; /* 改为垂直布局，让h2和hr自然上下排列 */
  justify-content: center;
  align-items: center;
}

.div-projects h2 {
  font-size: 55px;
  padding: 90px;
  color: white;
  transform: skewY(-9deg);
  margin: 0; /* 清除默认margin避免间距混乱 */
}

.hr-projects {
  width: 20%;
  border-radius: 30px;
  z-index: 2;
  border: 3px solid rgba(0, 136, 169, 1);
  position: relative;
  /* 修正动画属性顺序，确保方向参数生效 */
  animation: hr 19s infinite alternate;
}

@keyframes hr {
  from {
    /* 保留倾斜效果的同时，用translateX实现左移 */
    transform: skewY(-6deg) translateX(-100%);
  }
  to {
    /* 保留倾斜效果的同时，用translateX实现右移 */
    transform: skewY(-6deg) translateX(100%);
  }
}

修正说明 #

1. 调整容器为垂直flex布局，无需硬编码定位就能让hr稳定处于h2下方居中位置，同时适配不同屏幕。
2. 改用transform: translateX()实现位移，避免left/right的布局冲突，同时保留原本的倾斜效果。
3. 修正animation属性顺序，让alternate参数生效，实现左右来回循环的动画效果。

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