[Résolu] animation CSS3

Bonjour,

L'animation que j'ai suivie dans un tuto en ligne ne marche pas comme dans l'exemple : les li apparaissent toutes en même temps sans tenir compte du délai.

Pour tester le code en ligne : http://codepen.io/anon/pen/MwPgVB

Sinon, voici mon html :

<ul>
  <li class="views-row">1</li>
  <li class="views-row">2</li>
  <li class="views-row">3</li>
  <li class="views-row">4</li>
  <li class="views-row">5</li>
  <li class="views-row">6</li>
  <li class="views-row">7</li>
  <li class="views-row">8</li>
  <li class="views-row">9</li>
  <li class="views-row">0</li>
</ul>

Ma CSS :

ul {
  list-style: none;
}

li {
  float: left;
  margin: 10px;
  height: 100px;
  width: 100px;
  background: red;
  animation: appear 0.25s both;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: perspective(1000) translateY(-1em) rotateX(180deg);
  }
}

@for $i from 1 through 20 {
  li:nth-of-type({#$i}) {
    animation-delay: ($i * 0.1s);
  }
}

Il est où le bug ? Merci de votre aide.

//EDIT : il fallait basculer sur SCSS, et corriger le # : http://codepen.io/anon/pen/MwPgVB
Ça marche à présent
Modifié par myself (23 Jul 2015 - 19:05)

Bonsoir.

La partie traitant des délais est écrite en Sass et non en CSS pur. Tu es sûr de compiler Sass pour en obtenir le CSS final ?

Oui Raphael, j'ai fini par trouver les deux différences, ça marche bien. Merci de ton intérêt.
Modifié par myself (23 Jul 2015 - 19:41)