如何让CSS下拉箭头在动画变换过程中保持角度不变，避免移动时弯曲

DevOps 小满

2026-10-2

问题原因

你这个动画异常的核心原因是transform属性的覆盖规则：CSS的transform属性不会叠加，新设置的transform会完全替换之前的定义，同时你的基础样式里只写了webkit前缀的旋转属性，缺少标准属性定义。
具体到你的代码：

初始状态箭头有rotate(45deg)的旋转效果
动画的100%关键帧里只写了translate(10px,10px)，相当于同时把旋转角度重置为0
动画过渡过程中，旋转角度和位移同时变化，就会出现箭头角度偏移、移动路径弯曲的问题

修复后代码

CSS部分：

.arrow {
    content: "";
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-left: none;
    border-top: none;
    border-right: 1px #262626 solid;
    border-bottom: 1px #262626 solid;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: arrow;
    /* 补充标准transform属性，定义固定旋转角度 */
    transform: rotate(45deg);
}

@keyframes arrow {
  0% {
    opacity: 1;
    /* 保留旋转角度，仅位移归0 */
    transform: rotate(45deg) translate(0, 0);
  }
  100% {
    opacity: 0;
    /* 保留旋转角度，仅修改位移值 */
    transform: rotate(45deg) translate(10px, 10px);
  }
}

HTML部分无需修改：