任意数量的窗格的 CSS 动画过渡效果

Question

我正在制作一个包含多个窗格的网站，以及一个用于在它们之间切换的导航菜单。我想使用 CSS 中的过渡效果对窗格切换进行动画处理。窗格是

元素：

<ol class="content">
    <li class="pane">This is pane 1.</li>
    <li class="pane">This is pane 2.</li>
    <li class="pane">This is pane 3.</li>
</ol>

，

它们并排放置，因此我正在对内容的左边距属性进行动画处理，以使窗格向左和向右滚动，进入和移出视图：

@-webkit-keyframes scroll1to2 {
   from {margin-left:    0%;}
   to   {margin-left: -100%;}
}
@-webkit-keyframes scroll2to3 {
   from {margin-left: -100%;}
   to   {margin-left: -200%;}
}
@-webkit-keyframes scroll1to3 {
   from {margin-left:    0%;}
   to   {margin-left: -200%;}
}

，这当然可以逆转。问题是，对于超过 3 个窗格，此过程将难以处理(代码的长度随窗格数量呈二次增长(。

那么......你会如何为任意数量的窗格写这个？

编辑：我知道我可以使用javascript来生成CSS代码，但我希望有一种更优雅的方式，我错过了。

Answer 1

我不知道

您是否已经死心塌地地使用关键帧 - 虽然关键帧允许更高级的动画，但您的特定滑动示例可以通过简单的 css 过渡来完成。

.content{
  -webkit-transition:margin-left 1s ease-in-out;
  transition:margin-left 1s ease-in-out;
}

此规则表示，每当 margin-left 属性更改时，内容块将使用 1 秒的缓动过渡，只要用户导航，您就可以在 javascript 中执行此操作。

您可以在webkit博客上找到有关css转换的更多信息。