Animierte Listeneinträge - könnten Headlines sein

dabblet.css

/**
 * Animierte Listeneinträge - könnten Headlines sein
 */

body {
      font-family: 'open sans', helvetica, arial, 
      sans-serif;
    }
    ul {
      width: 40em;
      margin: 0 auto;     
    }
    li {
      margin: 1.2em 20px;
      padding: 5px 20px;
      background: #cf6;
      font-size: 1.8em;
      list-style: none;
      background: #eee;
      color: #a20000;
    }
    li:nth-child(even):hover {
      -webkit-transform: rotate(3deg) scale(1.5);
      transform: rotate(3deg) scale(1.5);
      color: #000;
      background: #6cf;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    }
    li:nth-child(odd):hover {
      -webkit-transform: rotate(-3deg) scale(1.5);
      transform: rotate(-3deg) scale(1.5);
      color: #000;
      background: #6f6;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    }

dabblet.html

<ul>
    <li>Be on time - delays affect everyone</li>
    <li>No phones, no mails, no messages, no Twitter, no Facebook</li>
    <li>There are no stupid questions</li>
    <li>This is your time - use it</li>
    <li>Empty your mind - today you get a reset that will make you 4x more effective</li>
  </ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}