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

Question

我正在制作一个包含多个 Pane 的网站，以及一个用于在它们之间切换的导航菜单。我想使用 CSS 中的过渡效果为 Pane 切换设置动画。 Pane 是

元素:

<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>

，它们并排放置，所以我正在为内容的 margin-left 属性设置动画，使 Pane 左右滚动，进入和离开 View :

@-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 个以上的 Pane ，此过程将变得笨拙(代码的长度随 Pane 的数量呈二次方增长)。

那么...对于任意数量的 Pane ，您将如何编写此代码？

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

Answer 1

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

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

此规则说明内容 block 将在 margin-left 属性更改时使用 1 秒缓动过渡，您可以在用户导航时在 javascript 中执行此操作。

您可以在 webkit blog 上找到有关 css 转换的更多信息.