Slider en CSS

Bonjour,

Pour une appli sur tablette (Android 4.0.4) j'ai dû créer un slideur qui passe d'une <div> à une autre en cliquant sur deux boutons droite et gauche.

J'ai testé avec:

Code:

---

1 2 3 4 5 6 7

@-webkit-keyframes slideToLeft { 0% { translateX(0); } 100% {translateX(-100%); } } .appEntriesSlide.toLeft { -webkit-animation: slideToLeft 0.5s 1 linear; }

---

L'animation était fluide mais la tablette m'était 2.0sec au total entre le déclenchement de l'animation et sa fin (durée de l'animation seule: 0.5sec!)

Après plusieurs essais non concluant, j'ai trouvé une alternative avec le margin-left:

Code:

---

1 2 3 4 5 6 7

@-webkit-keyframes slideToLeft { 0% { margin-left: 0; } 100% { margin-left: -100%; } } .appEntriesSlide.toLeft { -webkit-animation slideToLeft 0.5s 1 linear }

---

Cette fois ci la durée totale était de 1.0sec (deux fois plus vite qu'avec le translateX) mais par contre lors de l'animation elle même, la slide saccadait et par conséquent, pas du tout agréable pour l'utilisateur...

Venons en maintenant à ma question: Est ce que quelqu'un connaîtrait une solution pour que mon animation soit fluide et qu'elle se déclenche quasi immédiatement?

Merci beaucoup.