如何修复CSS动画覆盖元素初始translate变换属性的问题

为元素添加animation属性时，元素初始定位会出现异常偏移：无论移除还是添加transform-origin属性都会出现相同问题，元素预先设置的初始transform变换属性会被动画覆盖。

复现代码 #

CSS 部分 #

div {
  border-radius: 45px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section[id ^='sec'] {
  border-radius: 45px;
}

.container {
  position: relative;
  width: 10em;
  height: 10em;
  background: red;
}

#sec1 {
  right: 0;
  position: absolute;
  height: 40%;
  width: 40%;
  background: yellow;
  transform: translateX(100px) translateY(-80px)
}

#sec2 {
  height: 40%;
  width: 40%;
  background: aqua;
  transform: translateX(-100px) translateY(-80px)
}

#sec3 {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40%;
  width: 40%;
  background: green;
  transform: translateX(-100px) translateY(80px)
}

#sec4 {
  position: absolute;
  height: 40%;
  width: 40%;
  right: 0;
  bottom: 0;
  background: purple;
  transform: translateX(100px) translateY(80px)
}

#sec5 {
  position: absolute;
  bottom: 50;
  left: 0;
  height: 40%;
  width: 40%;
  background: navajowhite;
  transform: translateX(-100px) translateY(-10px)
}

#sec6 {
  position: absolute;
  bottom: 50;
  right: 0;
  height: 40%;
  width: 40%;
  background: teal;
  transform: translateX(100px) translateY(-10px)
}

#sec7 {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 40%;
  width: 40%;
  background: pink;
  transform: translateX(-50px) translateY(100px);
}

#sec8 {
  position: absolute;
  top: 0;
  left: 0;
  height: 40%;
  width: 40%;
  background: cadetblue;
  transform: translateX(50px) translateY(-100px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform-origin: initial;
    transform: translateY(-100px);
  }
  50% {
    transform-origin: initial;
    transform: translateY(-120px);
  }
  100% {
    transform-origin: initial;
    transform: translateY(-100px);
  }
}

HTML 部分 #

<div class="container">
  <section id="sec1"></section>
  <section id="sec2"></section>
  <section id="sec3"></section>
  <section id="sec4"></section>
  <section id="sec5"></section>
  <section id="sec6"></section>
  <section id="sec7"></section>
  <section id="sec8"></section>
</div>

CSS动画关键帧中定义的transform属性优先级高于元素静态样式中的transform，会完全替换静态样式的对应值，而非在原有变换基础上叠加。
示例中#sec8的静态transform设置了X轴50px、Y轴-100px的偏移，但动画关键帧中只定义了Y轴偏移，直接丢失了X轴的偏移设置，导致元素位置异常。另外关键帧中反复声明transform-origin: initial属于冗余写法，该属性不需要在动画帧中重复定义，直接在目标元素上设置一次即可生效。

将元素静态样式中固定的transform值补全到动画的每一个关键帧中，保证动画执行过程中固定偏移量不会丢失，移除关键帧中冗余的transform-origin声明即可：

#sec8 {
  position: absolute;
  top: 0;
  left: 0;
  height: 40%;
  width: 40%;
  background: cadetblue;
  transform: translateX(50px) translateY(-100px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateX(50px) translateY(-100px);
  }
  50% {
    transform: translateX(50px) translateY(-120px);
  }
  100% {
    transform: translateX(50px) translateY(-100px);
  }
}

如果固定偏移量需要复用，也可以通过CSS变量存储固定值，避免重复书写代码。

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