Nous allons voir aujourd’hui comment animer des illustrations avec la propriété CSS3 animation

Voici ce que l’on va pouvoir obtenir à la fin de ce tuto :

Nous allons d’abord commencer par animer notre illustration sur After Effects. Pour ce faire, nous allons nous servir du tutoriel mis à notre disposition par notre ami de chez Mattrunks. Dans cette animation nous allons utiliser l’effet “raccorder les tracés” qui permet de donner cet effet de déstructuration (plus il y aura de tracé sur notre dessin vectoriel plus l’effet sera sympa).

Dans un second temps, nous allons exporter notre travail sous After Effects en sequence PNG avec en paramètre Channels : “RGB + Alpha”

2.2

Ceci va nous créer un ensemble d’image en fonction du temps de l’animation et du nombre de frame par secondes de cette dernière. Dans notre cas, 25images/s et 2 secondes d’animation.
Cet ensemble d’images, il va falloir les joindre sur une même image pour en faire notre sprite sheet. Pour cela, nous allons utiliser ce script Photoshop.

Pour l’installer il suffit de le glisser dans le bon répertoire
Sur Mac: /Applications/Adobe Photoshop …/Presets/Scripts/
Sur Windows: C:\Program Files\Adobe\Adobe Photoshop …\Presets\Scripts\

Pour créer le sprite il faut donc sur Photoshop aller dans Fichier > Scripts > Chargement des fichiers dans une pile et ensuite (on utilise le script installé) Fichier > Scripts > Create Sprite Sheet form layers…
Ce qui va vous donner un fichier

steps2

C’est sur ce fichier que nous allons travailler en CSS3 pour animer notre icone avec keyframes et steps().
La propriété keyframes va correspondre à la déclaration de l’image-clé de début (from) et l’image-clé de fin (to).
Nous la déclarons avec @ et lui donnons le nom “play”. Ensuite nous appelons dans notre div avec la classe “steps” notre animation. Cette dernière appelle “play” et on lui ordonne de réaliser cette animation en 2 secondes avec 50 étapes (correspond au nombre d’étapes sur le sprite) et de boucler à l’infini.

Le code HTML :


<div class="steps"></div>

Le code CSS :


.steps{
    width: 191px;/* Largeur de votre animation */
    height: 307px;/* Hauteur de votre animation */
    background-image: url("images/steps.png");/* Notre sprite */
   
    -webkit-animation: play 2s steps(50) infinite;/* Code pour appeler notre keyframe */
       -moz-animation: play 2s steps(50) infinite;
        -ms-animation: play 2s steps(50) infinite;
         -o-animation: play 2s steps(50) infinite;
            animation: play 2s steps(50) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -9550px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -9550px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -9550px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -9550px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -9550px; }
}