我正在尝试在单击菜单项时为屏幕上的多个元素设置动画...除一个以外的所有动画都按需要工作。我想从右向左移动页面的主要内容(部分),而不是在其中滑动,只是出现而没有任何过渡。这是相关的 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单击页脚中的其中一个链接后。
非常感谢任何建议。
谢谢
最佳答案
指定一个必须动画的属性:
.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);
}
关于jquery - CSS3 translateX 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23198881/