cssanimationuser-interfacekeyframepanes

CSS-animating transition effects for arbitrary number of panes

I'm making a website with several panes, and a navigational menu to switch between them. I want to animate the pane-switching using transition effects in CSS. The panes are <li> elements:

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

, which are positioned side-by-side, so I'm animating the content's margin-left property to cause the panes to scroll left and right, into and out of 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%;}
}

, which of course can be reversed. The problem is, this process would be unwieldy for more than 3 panes (the length of the code grows quadratically with the number of panes).

So... how would you write this for an arbitrary number of panes?

EDIT: I know I could use javascript to generate the CSS code, but I'm hoping there's a more elegant way that I've missed.

Solution

  • I don't know if you are dead set on using keyframes for this - While keyframes allow for more advanced animations, your particular sliding example could be accomplished with a simple css transition. 

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

    This rule says that the content block will use a 1 second easing transition any time the margin-left property changes, which you could do in javascript whenever the user navigates.

    You can find out more about css transitions on the webkit blog.