Le motion design vs. l’animation CSS3/SVG

Sur un site web, on retrouve souvent des animations visuelles, mais il est parfois difficile de savoir s’il s’agit d’une simple vidéo ou d’une création en CSS et/ou SVG. Cet article pose les pour et les contre l’utilisation des deux formats. Quelques aspects techniques seront abordés, mais nous ne vous apprendrons pas à créer vos propres animations, cela fera l’objet d’un futur article.

L’animation audiovisuelle / motion design

L’animation audiovisuelle comporte trois domaines principaux : le cinéma d’animation, les effets spéciaux et le motion design. C’est ce dernier qui retiendra notre attention.

L’art de créer des œuvres en mouvement numériquement est appelé motion design. Ce terme anglais signifie « design de mouvement », en somme c’est l’art d’animer des éléments et l’intention de faire passer un message à travers. Le motion design est un terme général qui peut se découper en plusieurs formats, voyons ensemble les plus connus :

Le flat design (& Material Design)

Le flat design est le second terme le plus usité lorsqu’on parle de motion design, il est très en vogue ces dernières années, car pertinent et minimaliste pour promouvoir des choses simples. Généralement composé de formes géométriques et d’aplats de couleurs, le flat design permet de schématiser d’un simple animal, à des situations très complexes.

L’animation de typographie

Ce type d’animation est souvent utilisé pour des clips musicaux, afin de transmettre un sens aux mots et aux lettres qui défilent. Ce format permet de créer de l’émotion et délivrer des messages forts uniquement en jouant avec de la typographie. Il peut être utilisé pour faire passer un message, raconter une histoire, ou même mettre en avant une nouvelle typographie comme dans la vidéo ci-dessous :

L’infographie animée

Une infographie de presse désigne un type de schéma explicatif destiné à mettre en image des informations, notamment statistiques ou géographiques. Ce type d’animation consiste donc à mettre en mouvement chacun des éléments dans un ordre précis pour donner encore plus de sens et de vie à l’infographie.

Interaction utilisateur : les limites de la vidéo

Ces différents formats d’animation sont de plus en plus répandus sur le web, surtout pour des publicités, car ils restent dynamiques et informatifs. En revanche une vidéo ne permet pas d’interagir complètement avec l’utilisateur. C’est pourquoi le CSS et le SVG sont devenu indispensables pour créer ce type d’interaction. Avec l’ère du material design et le déclin de Flash, ces animations sont mises en place sur les sites web, à l’instar des vidéos. C’est donc la principale différence qui réside entre ces deux techniques d’animation. Malgré tout, nous retiendrons que l’utilisation du motion design reste un bon moyen de dynamiser votre site et de promouvoir votre vidéo sur plusieurs plateformes telles que YouTube, Vimeo ou encore Dailymotion.

L’animation CSS3 & SVG

Avec l’arrivée de CSS3, les nouvelles animations proposées sont de plus en plus nombreuses. Voyons en quelques-unes ensemble :

Les animations @keyframes

Une animation permet à un élément de passer progressivement d’un style à l’autre, mais pour que l’animation fonctionne, vous devez lier l’animation à un élément (généralement on utilise des formes géométriques simples). Et vous pouvez modifier autant de propriétés CSS que vous souhaitez, autant de fois que vous le souhaitez, c’est aussi pour cela qu’il est très difficile de se rendre compte s’il s’agit d’une vidéo ou d’une animation en code pur.

• La règle @keyframes

Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l’animation va progressivement passer du style actuel au nouveau style à certains moments.

• animation-direction

Diriger l’animation en sens inverse ou en alternance. La propriété direction d’animation sert à laisser une animation se dérouler en sens inverse ou en alternance.

• animation : une propriété abrégée pour définir toutes les propriétés d’animation
• animation-delay : spécifie un délai pour le début d’une animation
• animation-fill-mode : spécifie un style pour l’élément lorsque l’animation ne joue pas (quand il est terminé ou lorsqu’il a un délai)
• animation-iteration-count : spécifie le nombre de fois où une animation doit être lue
• animation-name : spécifie le nom de l’animation @keyframes
• animation-play-state : spécifie si l’animation est en cours d’exécution ou en pause

Les transformations

Les transformations CSS3 vous permettent de traduire, de faire pivoter, d’étaler et d’incliner des éléments.
Une transformation est un effet qui permet à un élément de changer de forme, de taille et de position. CSS3 supporte les transformations 2D et 3D.

• translate() : permet d’effectuer une translation (un déplacement) de l’élément sur les axes X et Y
• rotate() : permet d’effectuer une rotation de l’élément ciblé
• scale() : permet d’agir sur l’échelle (les dimensions) de l’élément
• skewX() : permet d’obliquer la forme d’un élément dans son axe X
• skewY() : permet d’obliquer la forme d’un élément dans son axe Y
• matrix() : permet de réunir en une seule déclaration toutes les fonctions précédentes sous la forme d’une matrice

Les transitions : ease or not ease

Les transitions CSS3 vous permettent de modifier les valeurs des propriétés en douceur (d’une valeur à l’autre) pendant une durée donnée.
Spécifiez la courbe de vitesse de l’animation. La fonction animation-timing-function spécifie la courbe de vitesse de l’animation. Elle peut avoir les valeurs suivantes:

• ease : spécifie une animation avec un démarrage lent, puis rapide, puis finit lentement (par défaut)
• linear : spécifie une animation avec la même vitesse de début en fin
• ease-in : spécifie une animation avec un démarrage lent
• ease-out : spécifie une animation avec une fin lente
• ease-in-out : spécifie une animation avec un début et une fin lents
• cubic-bezier (n, n, n, n) : vous permet de définir vos propres valeurs dans une fonction cubic-bezier

Le SVG

SVG est un format d’image vectorielle de type XML pour les graphiques en 2D, qui permet l’interactivité et l’animation. Les SVG peuvent être animés de la même façon que les éléments HTML, en utilisant les keyframes CSS et les propriétés d’animation, ou avec des transitions CSS. Dans la plupart des cas, les animations complexes comportent des transformations, une translation, une rotation, un redimensionnement ou une déformation. On peut également utiliser des libraires qui vont nous simplifier la tâche.

La librairie Snap SVG

Snap.svg est la nouvelle librairie JavaScript open source d’Adobe. Elle permet de générer du SVG ou d’en charger un existant et de l’animer. Bien sûr, vous pouvez générer SVG avec Snap, mais vous pouvez également utiliser Snap pour travailler avec SVG généré à partir d’outils tels que Adobe Illustrator, Inkscape ou Sketch. Vous pouvez même charger des chaînes de SVG de manière asynchrone et interroger les pièces dont vous avez besoin afin de transformer les fichiers SVG en feuilles de sprite.

La librairie Lazy Line Painter

Lazy Line Painter est un plugin jQuery qui permet de faire du traçage dynamique de fichiers SVG de façon très simple. Seules quelques étapes suffisent pour obtenir un rendu de qualité.

Des animations interactives

L’utilisation des animations en CSS et SVG est clairement recommandée si vous souhaitez créer de l’interaction avec vos utilisateurs, d’autant plus qu’elles ne pèsent pas beaucoup, comparées à une vidéo (qui ne devrait pas dépasser plus de 10 Mo). En revanche une vidéo pourra être partagée plus facilement et pourra être intégrée plus rapidement sur un autre site web ; surtout grâce aux plateformes telles que YouTube, Vimeo ou Dailymotion, qui proposent un code iframe qui permet d’intégrer une vidéo en quelques clics.

Point noir : Internet Explorer (v.8 et inférieures) ne supporte pas le SVG et Firefox ne supporte pas les animations !