jquery - CSS3 translateX 不工作

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>

你可以看到代码的运行here单击页脚中的其中一个链接后。

非常感谢任何建议。

谢谢

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