在动画之前应用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度），然后在设置水平平移动画时覆盖旋转。动画完成后，它将默认为初始状态。

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

这个问题是，当你使用变换旋转时，宽度现在是高度，因此转换起源黑客：）

＆＃13;

＆＃13;

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) }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;