2D 变换不起作用（新手问题）

Question

我正在尝试在我的网站项目上使用 2D 变换，使图像从左侧屏幕外移动到屏幕上的某个位置。我已经尝试了在 W3 Schools 和 MDN Web Docs 上读到的所有内容，但没有任何效果。无论我做什么，图像都保持完全静态，并且变换不会播放。

这是我的代码：

`.authorimage {
    width: 33%;
    padding: 2rem;
    transition: transform 3s;
    transform: translateX(-45rem);
}`

奇怪的是，转换播放的唯一一次是当我进入网络浏览器的检查并取消单击/单击“transform：translateX（-45rem）;”的CSS代码时然后，也只有到那时，转换才会通过 W3 学校完成它应该做的事情。我还通过 MDN Web Docs 多次查阅和更改了我的代码，但没有任何效果。有人可以帮忙吗？

Answer 1

我认为您可能会将过渡与动画混淆。 过渡将在两种样式之间插入。 动画实际上会有一些东西移动。

.authorimage {
  width: 33%;
  padding: 2rem;
  animation-duration: 1s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    transform: translateX(-45rem);
  }
  to {
    transform: translateX(0);
  }
}

<div class="authorimage">Hello</div>