- Learn how easy it is to animate content with Sequence.js.

  Be sure to have the CSS pane open for code examples.

- Steps (think of these as slides in a presentation for example) are arranged into `<li>` elements. The second `<li>` (step 2) is now active.

  When a step becomes active, it is given the class `.seq-in` . This can be used to animate each step's content.

  This `.box` element for example starts transparent and 100px to the right. We make it animate to its "in" position with the selector `.seq-in .box` .

- When a step becomes inactive, it is given the class of `.seq-out` so we can also style how its content transitions out using the selector `.seq-out .box` .

  Press the next button again and you'll see this `.box` element become transparent and transition 100px to the left as it transitions to its "out" position.

- Try changing the CSS for yourself. Swap `translateX(100px)` in the `.box` ruleset for `translateY(100px)` and the element will transition in from the bottom instead.

  Using these simple class names, you can add an infinite variety of transitions to as many elements as you wish. Take a look at some of the example applications we've created.

- Sequence.js provides this CSS framework along with functionality such as touch support, auto play, and preloader.

  As the animation framework is CSS based, it fits in with the workflow you're familiar with. Use responsive design, hardware acceleration, preprocessors...you name it.