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

CSS3 translateX无法正常工作

1 个答案: