在动画之前应用 CSS 转换

Question

我有以下情况：

#animation-target {
  transform: rotate(90deg);

  width: 50px;
  height: 100px;
  animation: peek-from-left 1000ms linear;
}

@keyframes peek-from-left {
    0% { transform: translate(-100%, 0) }
    100% { transform: translate(0, 0) }
  }

<div id="animation-target">
  <img src="http://placehold.it/50x100"/>
</div>

变换仅在动画之后应用，但我需要它以相反的方式工作。我怎样才能使转换首先发生？

Answer 1

您正在设置默认属性（90 度旋转），然后在为水平平移设置动画时覆盖旋转。动画完成后，默认为初始状态。

如果您想保持旋转，您还需要在动画中指定它。

问题是，当您使用变换旋转时，宽度现在是高度，因此变换原点 hack :)

body {
  margin: 0;
}

#animation-target {
  transform: translate(100%, 0) rotate(90deg);
  transform-origin: 50% 25%;
  width: 50px;
  height: 100px;
  animation: peek-from-left 1000ms linear;
}

@keyframes peek-from-left {
  0% { transform: translate(-100%, 0) rotate(90deg) }
  100% { transform: translate(100%, 0) rotate(90deg) }
}

<div id="animation-target">
  <img src="http://placehold.it/50x100"/>
</div>