css - 在动画之前应用 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>