28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit problème, je débute avec les keyframes et j'essaye de faire un truc tout con, une sorte de GIF animé ms en CSS3.

En fait je pensais qu'en changeant le background-position d'une image je pourrais avoir un effet Gif animé en prenant un sprite à 2 états (avec une différence assez simple entre les deux).

Ms en fait en utilisant :

@-webkit-keyframes xxxx{
	0% {background-position:0 0;}
	50% {background-position:0 -295px;}
    100% {background-position:0 0;}


l'animation n'est pas celle que je souhaite puisqu'il y a un long mouvement de bas en haut, alors que moi je veux juste que l'image apparaisse et disparaisse très vite sans que l'on voit la transition.

Est-ce que quelqu'un a une astuce ? Où alors je dois garder le bon vieux GIF ??

Merci
à vous

Yohann
Yohann83 a écrit :
Est-ce que quelqu'un a une astuce ?

Une piste, pas testée: définir en plus des frames à 49.9% (background-position: 0 0) et 99.9% (background-position: 0 -295px). De sorte que sur 49.9% du temps tu n'as pas de transition, et ensuite la transition se fait sur 0.1% du temps.

Yohann83 a écrit :
Où alors je dois garder le bon vieux GIF ??

Ce serait pas complètement idiot dans la mesure où les navigateurs permettent de stopper la lecture des images animées d'une page (GIF ou APNG), ce qui peut être utile ou nécessaire pour certains utilisateurs, avec un simple raccourci clavier. À ma connaissance ce n'est pas le cas avec les animations CSS.