CSS3 translateX not working

Question

当单击菜单项时，我正在尝试在屏幕上设置多个项目的动画。。。除一个动画外的所有动画都按要求工作。我想将页面的主要内容（部分）从右向左移动，但不是在其中滑动，而是在没有任何过渡的情况下显示。这是相关的css代码：

section{
  width: 920px;
  background: rgb(247, 239, 239);
  position: absolute;
  left: 2000px;
  top: 240px;
  padding:20px;
}
.fadeInRight{
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -ms-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transform: translateX(-2000px);
  -moz-transform: translateX(-2000px);
  -ms-transform: translateX(-2000px);
  -o-transform: translateX(-2000px);
  transform: translateX(-2000px);
}

html代码：

<section id="content" class="fadeInRight">

</section>

单击页脚中的一个链接后，您可以在此处看到代码的作用。

如有任何建议，不胜感激。

感谢

Answer 1

指定必须设置动画的属性：

.fadeInRight{
  -webkit-transition: -webkit-transform 1s ease-in-out;
  -moz-transition: -moz-transform 1s ease-in-out;
  -ms-transition: -ms-transform 1s ease-in-out;
  -o-transition: -o-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  -webkit-transform: translateX(-2000px);
  -moz-transform: translateX(-2000px);
  -ms-transform: translateX(-2000px);
  -o-transform: translateX(-2000px);
  transform: translateX(-2000px);
}