Animation d'un fichier PNG sans une seule ligne de JavaScript
Si comme moi vous en avez assez de voir des animations GIF, toutes pixelisés et en 256 couleurs voici comment créer des animations avec un fichier PNG ou JPG très facilement et sans une seule ligne de JavaScript.
Avant toute chose, si vous souhaitez intégrer ce type d’animations sur vos sites Internet, faites bien attention, car cela n’est compatible qu’à partir d’Internet Explorer 10.
Création du fichier à animer
Pour créer ce fichier, il vous faudra créer un sprite. C’est à dire que sur la même image, vous allez placer toutes les images de l’animation. Voici un exemple de sprite :
Quand vous allez créer ce fichier, pensez bien à noter les dimensions d’une frame, et sa durée, et la durée totale de l’animation.
Vous pouvez télécharger le fichier que je vais me servir pour ce tuto ici : http://lemon-cake.fr/wp-content/uploads/2014/05/nyan_cat.png
Création de l'animation
Passons maintenant à l’animation en CSS3. L’image à animé devra être à l’intérieur d’une div (c’est le plus simple). Voici le code HTML :
[html] <html> <head> <title>Animation</title> </head> <body> <div> <img class="animation" src="nyan_cat.png" alt=""> </div> </body> </html> [/html]
Et le code CSS :
[css] div { width: 316px; height: 200px; overflow: hidden; display: inline-block; -webkit-transition: opacity 100ms ease-in,width 100ms ease-in; -moz-transition: opacity 100ms ease-in,width 100ms ease-in; -ms-transition: opacity 100ms ease-in,width 100ms ease-in; -o-transition: opacity 100ms ease-in,width 100ms ease-in; transition: opacity 100ms ease-in,width 100ms ease-in; position: relative; }
.animation { -webkit-animation: nyan 750ms steps(7) infinite; -moz-animation: nyan 750ms steps(7) infinite; -ms-animation: nyan 750ms steps(7) infinite; -o-animation: nyan 750ms steps(7) infinite; animation: nyan 750ms steps(7) infinite; position: absolute; top: 0px; left: 0px; }
@-webkit-keyframes nyan { 0% { left: 0; }
to {
left: -2212px;
}
}
@-moz-keyframes nyan { 0% { left: 0; }
to {
left: -2212px;
}
}
@-ms-keyframes nyan { 0% { left: 0; }
to {
left: -2212px;
}
}
@-o-keyframes nyan { 0% { left: 0; }
to {
left: -2212px;
}
}
@keyframes nyan { 0% { left: 0; }
to {
left: -2212px;
}
} [/css]
A la place des dimensions de la div, remplacez les par celle de votre animation, et remplacer-les 100ms, par le temps d’une frame.
Pour l’animation, remplacer nyan, par le nom de votre animation, 750ms, par le temps total de votre animation, et step par le nombre de frames - 1. Le infinite, permet de répéter l’animation à l’infinie.
Puis changez le nom nyan des keyframes par celui de votre animation, et le to par la dimension de votre image - la largeur de 1 frame.
Résultat final
Voici le résultat final :
Démo
2015-12-17 23:52:32