Create an animated bullet point list using Impress.js

Question

I'm using impress.js for a presentation I have to give tomorrow and all I'm wondering is how (or if it's possible) to have my list items in my unordered list animate in one by one on click just like it would work in powerpoint/prezi.

Here's my template

<h2>Presentation</h2>
<ul>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
</ul>

and here's my CSS I have so far which animates all the li's in together, but not one at a time on click.

.notes {
    display:none;
}

.step h2 {
    font-size: 78px;
    font-weight: bold;
}

.step ul {
  list-style-type: square;
  font-size: 1.4em;
  text-align: left;
  line-height: 1.5em;
  list-style-position: inside;
  transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -o-transform: translateX(-300px);
  -webkit-transform: translateX(-300px);
  transition: all 1s ease-in 0s ;
  -moz-transition: all 1s ease-in 0s ;
  -ms-transition: all 1s ease-in 0s ;
  -o-transition: all 1s ease-in 0s ;
  -webkit-transition: all 1s ease-in 0s ;
}

.step.present ul {
  transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

any ideas?

Answer 1

What I did to accomplish this is write different lists like this:

<ul>
    <li> One </li>
    <br> (I don't know the command for new line atm)
    <br>
</ul>

<ul>
    <br> 
    <li> Two </li>
    <br>
</ul>

<ul>
     <br>
     <br>
    <li> Three </li>
</ul>

<br> stands for newline. I don't have the presentation at hand.

This is probably not the best solution, but it worked in my presentation. With transparancy for Elements in the background it looks like highlighting each item.