A Pen by Joe Villanueva.

Better-List-Item-Rows.markdown

Better List Item Rows

A Pen by Joe Villanueva on CodePen.

License.

index.html

<div>
  <h1>Better List Item Rows</h1>
  <ul class="container delayedEntry">
    <li>A lil somethin</li>
    <li>A lil somethin</li>
    <li>A lil somethin</li>
    <li>A lil somethin</li>
    <li>A lil somethin</li>
  </ul>
</div>

style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

@keyframes delayedEntry {
  0% { transform: translateY(500%); }
  100% { transform: translateY(0%); }
}

body {
  height: 100%;
  background-color: #22B7EB;
  padding: 40px;
  font-family: Open Sans, sans-serif;
}
div { 
  background-color: #FFFFFF;
  padding: 20px;

  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    li {
      list-style-type: none;
      background-color: #EFEFEF;
      border: 2px solid #FFFFFF;
      padding: 5px;
      transition: background-color 0.3s ease;
      transform: translateY(500%);
      
      &:hover {
        background-color: #FFFFFF;
      }
    }
  }
}
/* Choose the max number of visible rows for your situation */
@for $i from 1 through 10  {
  li:nth-child(#{$i}) {
    animation: delayedEntry 0.2s cubic-bezier(.05,.58,.32,1) forwards;
    $delay: "." + (#{$i}) + "s";
    animation-delay: unquote($delay);
  }
}