Animation d'un fichier PNG sans une seule ligne de JavaScript

Animation d'un fichier PNG sans une seule ligne de JavaScript

Tags : Animation, CSS, Sprites, Tutoriaux
Catégorie : Lemon Cake
Mise en ligne : 1 Juin 2014 à 12:30

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 :

google

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>
<head>
    <title>Animation</title>
</head>
<body>
    <div>
        <img class="animation" src="nyan_cat.png" alt="">
    </div>
</body>
</html>

Et le code 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;
    }
}

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 :

<Laisser un commentaire/>

* Champs obligatoire