10 astuces pour améliorer vos transitions et animations


Cela fait maintenant deux ans que j’ai écrit ici (_NdT: dans_ [24Ways](http://24ways.org/)) un article sur [les animations dans un monde sans Flash](http://24ways.org/2012/flashless-animation/). Depuis, les animations ont surgi un peu partout, aussi bien sur des interfaces au design épuré que sur des grilles de type magazine. C’est une époque formidable pour tous les mordus d’animation et d’interaction, les passionnés d’expérience utilisateur (UX), les designers d’interface utilisateur (UI) et toute une troupe d’autres acronymes&nbsp;!

Mais dans notre hâte à expérimenter toutes ces possibilités d’animation, il semble que nous nous posions de moins en moins la question de savoir si nous devrions vraiment les utiliser. Nous passons plus de temps à nous creuser les méninges sur la façon d’animer tous les éléments à 60fps qu’à réfléchir aux moyens d’éviter que les utilisateurs souffrant de [troubles vestibulaires](http://a11yproject.com/posts/understanding-vestibular-disorders/) ne puissent utiliser notre site.

<figure role="group"><img src="/images/Rachel_Nabors_-_Google_1-compressor.jpeg" alt="vos designers ne se sont pas posé la question de savoir s'ils devaient utiliser des animations"/></figure>

J’aime l’animation web. Je la vis, et j'en fais [d’adorables petites choses stupides](http://rachelnabors.com/alice-in-videoland/book/) qui n’auraient pas leur place sur un site qui se respecte. Je sais qu’on peut en abuser. Nous nous sommes tous moqués de la _Flash-turbation_... mais comme nous oublions vite les leçons apprises de cette époque du design web&nbsp;! Les effets de parallax scrolling sont peut-être le _skip intro_ de cette génération. Nous avons certainement appris des choses plus intéressantes dans la période de sobriété [entre Flash et l’API d’animation web](http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/).

Alors voici cinq petits conseils pour nous permettre de prendre un peu de recul par rapport aux excès d’animations. Si nous les gardons bien à l’esprit, nous pouvons faire de 2015 l’année où l’animation web prendra son véritable essor.

## Animez délibérément

Malheureusement, l’animation est considérée par la majorité des designers comme un élément décoratif. Les designers d’interfaces utilisateurs et les développeurs d’interaction comprennent mieux ces choses. Mais lorsque je donne un atelier sur l’_animation pour l’interaction_, je sais que mes étudiants devront mener une rude bataille contre des décideurs qui considèrent cela très joli, mais rangent rapidement le sujet au dernier rang de leurs priorités, quand ils ne l’éliminent pas tout simplement.

Difficile de se défaire de cette tare. Mais tout commence avec la qualité de nos choix&nbsp;: animer de manière délibérée, ou de ne pas animer du tout. Les animations de raccroc causeront toujours plus de mal que de bien. Les utilisateurs risquent de se plaindre qu’elles sont trop lentes ou trop rapides, ou de râler parce qu’ils ne comprennent pas ce qui se passe.

Au dernier Chrome Dev Summit cette année j’ai eu le privilège de m’entretenir avec [Roma Sha, responsable UX pour le design matériel de Polymer](https://www.youtube.com/watch?v=tfSiXRy1vEw) (et la merveilleuse [documentation d’animation](http://www.google.com/design/spec/animation/meaningful-transitions.html#)). Je lui ai demandé quel conseil elle donnerait aux personnes qui utilisent les animations et les transitions dans leur design. Elle m’a fait cette réponse très simple : **animez de manière délibérée**. Si vous ne pouvez pas vous poser un instant pour réfléchir à l’animation et pour prendre des décisions bien informées et bien articulées dans l’intérêt de l’utilisateur, alors mieux vaut ne même pas vous lancer là-dedans. Une animation prend de l’énergie, et une mauvaise animation est pire que pas d’animation du tout.

<figure role="group"><img itemprop="url" src="/images/Rachel_Nabors_-_Google_2.jpeg" alt="Oooh, quel rabat-joie ! Que pourrait-il arriver de mauvais ?"/></figure>

## Il faut plus que 12 principes

Nous essayons toujours de faire des corrélations entre des choses disparates qui suscitent notre intérêt. Depuis peu, il semble que de plus en plus de gens mettent [The Illusion of Life](http://www.amazon.com/gp/product/0786860707) (_NdT: une histoire des animations Disney et des procédés utilisés_) dans leur bibliothèque à côté de [Understanding Comics](http://www.scottmccloud.com/2-print/1-uc/index.html) (_NdT: le manuel de base pour comprendre la bande dessinée_). Ces livres nous donnent des aperçus utiles d’autres industries. Cependant, nous ne devrions jamais confondre un site web et un livre de bandes dessinées ou un dessin animé. Certains de ces concepts, s’ils nous aident à considérer notre travail sous un jour nouveau, sont plus ou moins appropriés au domaine qui est le nôtre.

Je pense en particulier aux _12 principes de l’animation_, mis en avant par les vétérans des studios Disney dans ce beau livre The Illusion of Life. Ces principes sont très utiles pour faire des animations réalistes et accrocheuses, comme une balle qui rebondit ou un écureuil qui trottine, mais ils ne nous orientent pas du tout pour savoir quand ou comment quelque chose doit être animé dans le cadre d’une expérience interactive améliorée, comme par exemple combien de temps un menu déroulant doit prendre pour se dérouler, ou bien si un groupe d’objets manipulables devrait être animé de manière séquentielle ou simultanée.

Les douze principes sont un excellent point de départ, mais nous avons tellement plus à apprendre. J’ai listé au moins [six autres fonctions d’animation interactive](http://alistapart.com/article/web-animation-at-work) applicables à la conception web et d’applications. Lorsque nous pensons à l’animation, nous devrions envisager pourquoi et comment, et non pas seulement aux aspects esthétiques. Ceux-ci ne signifient rien si l’animation est superflue ou source de confusion.

## Utile et nécessaire, _puis_ belle

Chez les Shakers, il y a un proverbe qui dit&nbsp;: “Ne fais pas quelque chose si elle n’est pas à la fois nécessaire et utile; mais si elle est à la fois nécessaire et utile, n’hésite pas à la rendre belle”. S’agissant de l’animation et du web, il y a actuellement très peu de documentation sur ce qui la rend utile ou nécessaire. Nous avons tendance à nous concentrer davantage sur la beauté, l’agrément, l’esthétique. Mais même si l’esthétique est importante, elle occupe la banquette arrière par rapport à l’expérience globale de l’utilisateur.

La première fois que j’ai vu [l’écran de chargement de Pokemon Yellow](//www.youtube.com/embed/m5MrbCGcaUI?rel=0) sur ma GameBoy j’ai été captivée. À partir de la sixième fois, j’écrasais le bouton Start dès que le logo apparaissait à l’écran. Ce qui nous semble plein de charme et de sens lorsque nous travaillons sur un projet peut apparaître tout autrement à nos utilisateurs. Et même lorsqu’une animation adorable est très bien reçue, comme ce fut le cas de l’écran d’ouverture de Pokemon Yellow, trop de répétitions d’une animation jolie mais devenue inutile peut irriter l’utilisateur.

<figure role="group"><img src="/images/animation-ui-illos2.jpeg" alt=""/><figcaption>J’ai trouvé ça mignon la première fois, mais à la 70ème... c’est chiant&nbsp;!</figcaption></figure>

Si une animation n’aide pas l’utilisateur d’une façon ou d’une autre, c’est une utilisation gratuite de la batterie et des cycles de processing. Plutôt que d’animer pour le seul plaisir d’animer, nous devrions être capables d’articuler deux choses que l’animation réalise pour l’utilisateur. Par exemple, prenons cette icône de menu de [Finethought.com](http://finethought.com/) (trouvée grâce à [Use Your Interface](http://useyourinterface.com/post/97576888941)). L’icône fait deux choses lorsqu’elle est cliquée&nbsp;:

1. Elle donne un feedback à l’utilisateur en s’animant, ce qui permet à l’utilisateur de savoir qu’elle a bien été cliquée.
2. Elle montre que sa relation au contenu de la page a changé, en se transformant en bouton de fermeture.

Si nous avons deux bonnes raisons d’animer quelque chose, rien ne s’oppose à ce qu’une troisième raison soit l’agrément de l’utilisateur.

## Aller 4 fois plus vite

Il existe une règle générale dans le monde de l’animation traditionnelle qui s’applique très bien à l’animation web&nbsp;: quelle que soit la durée de ton animation, divise-la en deux. Puis divise-la encore en deux. Lorsque nous travaillons sur une animation pendant des heures, notre notion du temps se dilate, ce qui nous paraît rapide est en réalité insupportablement lent pour la plupart des utilisateurs. En fait, la critique la plus courante actuellement de la part des utilisateurs d’interfaces animées est “c’est trop lent !” Une bonne animation est non bloquante, et pour cela, elle doit aller vite.

Lorsque vos animations sont prêtes à être intégrées au site, réduisez leur durée à 25% de leur vitesse originale&nbsp;: un fade-out de 4 secondes sera parfait en 1 seconde.

## Installer un bouton stop

Quel que soit l’intérêt ou la nécessité de votre animation, il y aura toujours des gens qu’elle rendra physiquement malades. Pour eux, il est important de prévoir une façon de désactiver les animations sur le site.

Heureusement, les designers web pensent déjà à divers moyens de permettre aux utilisateurs de choisir eux-mêmes leur expérience web. Par exemple, ce [site de présentation du film d’animation Little from the Fish Shop](https://www.youtube.com/watch?v=2c3siLM1zlw) permet aux utilisateurs de désactiver la plupart des effets de parallaxe. Même si cela n’annule pas toutes les animations, c’est suffisant pour vous éviter la nausée.

L’animation est un outil puissant dans l’arsenal du web design. Mais la prudence s’impose&nbsp;: si nous abusons de l’animation, elle risque de finir par avoir mauvaise réputation. Si nous la sous-estimons, elle ne sera jamais une priorité. Mais si nous la manions avec sagacité, l’animation est un outil qui nous aidera à construire des sites et des applications plus faciles à utiliser et plus agréables, pour les années qui viennent.

**Faisons de 2015 l’année où les animations web se seront mises au service des utilisateurs**.

<figure role="group"><img src="/images/Rachel_Nabors_-_Google_3-compressor.jpeg" alt="Un dinosaure qui pense 'ils ne créent jamais la même animation deux fois. Comme s'ils testaient les specs. Systématiquement. Ils se rappellent."/></figure>

NdT : _Les illustrations détournées de_ Jurassic Park _n'ont pas été retenues par l'éditeur de l'article original, Rachel Nabors les a amicalement communiquées à La Cascade_.


5 façons d'animer de manière responsable

Il existe plusieurs façons d'animer une image svg, depuis la balise `animate` jusqu'aux bibliothèques comme [Snap.svg](http://snapsvg.io) ou [SVG.js](http://www.svgjs.com). Nous allons essayer autre chose ici, en utilisant SVG à l'intérieur de notre HTML et en animant les parties de l'image avec CSS.

Je me suis amusé avec ça dernièrement, [Wufoo](http://www.wufoo.com/landing/1/?utm_source=csstricks&utm_medium=ppc&cmpid=brand&utm_network=d) souhaitant rafraîchir le graphisme de ses pubs sur [CSS-Tricks](http://css-tricks.com). Voici une idée de ce que nous allons réaliser&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_dvjhn" src="//codepen.io/chriscoyier/embed/dvjhn?height=400&amp;theme-id=light&amp;slug-hash=dvjhn&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/dvjhn/">
  Wufoo SVG Ad</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## 1. Concevoir la pub

Ça va ressembler à une [leçon de dessin sommaire](http://cdn.css-tricks.com/wp-content/uploads/2014/04/How_to_Draw_Owl.jpg), mais notre objectif étant l'animation, nous allons passer sur le reste vite fait. Je souhaitais une pub super simple à partir de leur logo classique, de leurs couleurs etc., auquels j'ajouterais une touche personnelle.

1. Faire sauter les lettres dans la page. Wufoo est un mot marrant, les lettres peuvent s'amuser un peu.
2. Dans le bon vieux temps, on faisait des T-Shirts avec un dinosaure devant, et derrière il y avait "Fast. Smart. Formidable", des caractéristiques que Wufoo partage avec les dinosaures, sans parler du jeu de mots sur FORMidable… (NdT: Wufoo est un outil permettant d'élaborer des formulaires, _form_ en anglais). Faisons apparaître et disparaître ce slogan.
3. Pour aller au bout de notre idée, faisons apparaître la tête d'un dinosaure qui surgit, intrigué, des profondeurs, et disparaît à la vitesse de l'éclair, laissant le mot "fast" s'afficher.

J'ai mis tout ça sur Illustrator&nbsp;:

<figure role="group"><img src="/images/ansvg1-compressor.jpeg" alt="des images conçues sur illustrator"/></figure>

Remarquez que le logo et le texte du slogan sont des formes vectorielles, leur rendu en `<path>` (chemins) SVG sera très simple.

Le texte "Fast." est laissé en tant que texte dans Illustrator. Quand je le sauvegarderai, il sera conservé sous la forme d'élément `<text>`.

## 2. Sauvegarder en format SVG

Illustrator peut le sauvegarder directement en <span itemprop="about">format SVG</span>&nbsp;:

<figure role="group"><img src="/images/ansvg2-compressor.png" alt="comment sauvegarder sur illustrator"/></figure>

Vous pouvez ouvrir ce fichier SVG dans votre éditeur de texte et voir le <span itemprop="about">code SVG</span>&nbsp;:

<figure role="group"><img src="/images/ansvg3-compressor.png" alt="le contenu complexe du fichier svg"/></figure>

## 3. Nettoyer le SVG, lui ajouter des classes

Pour le nettoyage, vous pouvez utiliser [SVGO](https://github.com/svg/svgo) qui optimisera le fichier, retirera le DOCTYPE et toutes les choses inutiles. Mais ce qui est plus important ici, c'est de donner des classes aux différentes formes, afin que nous puissions les sélectionner dans notre CSS.

    //CSS

    <svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

      
      <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />

      
      <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
      <path class="wufoo-letter" fill="#F4F4F4" d="..." />
         

      
      <g class="trex">
         <path ... />
         <path ... />
      </g>

    </svg>

## 4. Insérer le SVG

Vous pouvez copier-coller ce SVG dans votre HTML, à l'endroit où vous voulez que la pub apparaisse. Si vous ne voulez pas que ça embrouille votre template, vous pouvez aussi faire quelque chose comme&nbsp;:

    //HTML

    <aside class="sidebar">

       <div class="module module-ad">

           <?php include("ads/wufoo.svg"); ?>

       </div>

       ...

## 5. Animer !

Nos formes sont maintenant dans le [DOM](/articles/le-dom-cest-quoi-exactement), nous pouvons les cibler et leur appliquer un style comme à n'importe quel autre élément HTML. Allons-y.

Pour commencer, disons que cette animation doit avoir une durée totale de 10&nbsp;secondes.

#### Fade in/out des mots

Le premier événement est l'apparition des mots Fast. Smart. Formidable. Chaque mot sera affiché pendant une seconde. Nous allons donc réaliser une animation dans laquelle chaque mot apparaît pour une durée égale à 10% du temps total&nbsp;:

    //CSS

    @keyframes hideshow {
      0% { opacity: 1; }
      10% { opacity: 1; }
      15% { opacity: 0; }
      100% { opacity: 0; }
    }

Puis ciblons le premier mot et fixons la durée de l'animation à 10 secondes (10% de cette durée = 1 seconde)&nbsp;:

    //CSS

    .text-1 {
      animation: hideshow 10s ease infinite;
    }

Les deux mots suivants seront d'abord cachés (`opacity: 0;`) puis utiliseront exactement la même animation mais avec un délai, pour les faire partir successivement&nbsp;:

    //CSS

    .text-2 {
      opacity: 0;
      animation: hideshow 10s 1.5s ease infinite;
    }
    .text-3 {
      opacity: 0;
      animation: hideshow 10s 3s ease infinite;
    }

La demie seconde supplémentaire entre chaque mot permet un fade out en douceur avant l'apparition du mot suivant.

#### Lettres bondissantes

Passons maintenant aux lettres de WUFOO et à leur petite danse&nbsp;:

<figure role="group"><img src="/images/ansvg4-compressor.gif" alt="les lettres de wufoo s'animent"/></figure>

L'astuce ici est de donner une durée de 5 secondes à notre animation, mais de la faire fonctionner dans un sens puis dans l'autre. De cette façon, elle correspond bien à notre durée totale de 10 secondes, elle se produit au milieu comme nous le souhaitons, et nous n'avons besoin de paramétrer qu'un seul sens.

Chaque lettre a un petit délai, décalé par rapport aux autres&nbsp;:

    //SCSS

    .wufoo-letter {
      animation: kaboom 5s ease alternate infinite;
      &:nth-child(2) {
        animation-delay: 0.1s;
      }
      &:nth-child(3) {
        animation-delay: 0.2s;
      }
      &:nth-child(4) {
        animation-delay: 0.3s;
      }
      &:nth-child(5) {
        animation-delay: 0.4s;
      }
    }
    @keyframes kaboom {
      90% {
        transform: scale(1.0);
      }
      100% {
        transform: scale(1.1);
      }
    }

Pour abréger, j'ai écrit ce code en SCSS et sans y mettre les préfixes constructeurs.

Je trouve que la propriété `animation-delay` devrait pouvoir supporter de façon native une valeur aléatoire, ce serait sympa de voir un délai différent à chaque apparition.

#### Le dinosaure, enfin

Dès que les mots ont disparu, le dinosaure lève la tête. L'animal est construit avec de nombreux `path`, mais nous pouvons le cibler globalement grâce à l'attribut groupe `<g>` qui enveloppe tous ces chemins.

Pour animer une position, [il est préférable d'utiliser translate](http://css-tricks.com/tale-of-animation-performance/) et c'est ce que nous allons faire&nbsp;:

    //CSS

    @keyframes popup {
      0% {
        transform: translateY(150px);
      }
      34% {
        transform: translateY(20px);
      }
      37% {
        transform: translateY(150px);
      }
      100% {
        transform: translateY(150px);
      }
    }

Nous voulons que cette animation "dure" 3 secondes, en fait elle dure 10 secondes mais vous n'en verrez que 3 secondes, car lorsque `translateY(150px)` se déclenche, le dinosaure est enfoui si profond que vous ne voyez rien. Aux alentours de 37% de cette animation (vers 3 secondes) vous le verrez apparaître lentement puis disparaître rapidement vers le bas.

Pour appliquer cette animation, nous devons nous assurer que&nbsp;:

- Le dinosaure est invisible au départ.
- L'animation comporte un délai, de façon à ce que la danse des lettres soit achevée.

        //CSS

        .trex {
          transform: translateY(150px);
          animation: popup 10s 6.5s ease infinite;
        }

Le dinosaure se cache à la dernière seconde lorsque le mot "Fast." revient à l'écran (parce que toutes les animations sont définies comme `infinite` ce qui les relance dès qu'elles sont terminées).

## 6. Une pub responsive et cliquable

Un avantage considérable de SVG est que la qualité de l'image est toujours impeccable quelle que soit la taille. Pour obtenir une image flexible qui conserve son ratio (même équilibre global des proportions), nous pouvons utiliser la bonne vieille technique de la boîte avec padding.

    //HTML

    <div class="wufoo-ad-wrap">
      <svg class="wufoo-ad">
         ...
      </svg>
    </div>

    //CSS

    .wufoo-ad-wrap {
      height: 0;
      padding-top: 100%;
      position: relative;
    }
    .wufoo-ad {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

L'idée ici est que le "wrap" sera toujours un carré parfait, aux dimensions calculées à partir de sa largeur. Nous positionnons ensuite le SVG de façon absolue à l'intérieur de ce carré parfait, qui se redimensionnera avec bonheur.

Puisqu'il s'agit d'une pub, qui doit évidemment être cliquable, on pourrait utiliser `<a href="">` à la place de `<div>` pour le contenant wrap, dans ce cas n'oubliez pas d'ajouter `display: block`.

La [démo finale](http://codepen.io/chriscoyier/pen/dvjhn/) est ici.

Animer un SVG avec CSS

Ce qui est bien quand on enseigne, c’est que les étudiants arrivent toujours avec de nouvelles idées. L’un d’eux voulait reproduire un effet observé sur [Squarespace](http://www.squarespace.com/about/values), où une `div` semble entaillée&nbsp;:



<figure role="group"><img src="/images/navigation-compressor.jpeg" alt="navigation, l’onglet sélectionné semble porter une entaille"/></figure>

Sachant que son niveau lui permettait de comprendre les HTML et CSS du site, je me suis lancé avec elle dans la réalisation de cet effet. Ce découpage de la `nav` n’est pas si facile, ma première idée était de créer une image aux dimensions de l’entaille et de l’intégrer avec `::after`, mais ce n’est pas très responsif et pas aisé à gérer.

## Clip Path entre en scène

La propriété CSS clip-path permet de cacher des portions d’un élément via le masquage (_masking_) et le découpage, ou détourage (_clipping_).



<figure role="group"><img src="/images/ville-compressor.jpeg" alt=""/><figcaption>L’image qui nous servira de base pour nos découpages.</figcaption></figure>

En bref, la façon dont la propriété fonctionne est simple&nbsp;: on fournit une série de valeurs X et Y pour créer un chemin. Ces valeurs, une fois un chemin complet créé, découpent l’image située à l’intérieur.

Nous pouvons créer de nombreuses formes différentes à partir de cercles, d’ellipses, de polygones. La créativité est la seule limite.

<h3>Un triangle simple</h3>

<div class="clipbox clipPolygon"></div>

L’effet ci-dessus est obtenu en utilisant simplement un élément et en lui appliquant un clip-path.

    //CSS
    .clipClass {
       clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

### Whoa, détaillons tout ça

De la même façon que pour la propriété `position`, nous devons penser en termes de valeurs X et Y. X:0 et Y:0 sont situés dans le coin supérieur gauche de l’élément. X:100% signifie qu’on a atteint le côté droit et Y:100% le bas.

Ok, cool. Donc le chemin que nous venons de créer utilise les points suivants&nbsp;:

    x: 0, y:100%
    x: 50%, y: 0
    x: 100%, y: 100%

Un chemin simple, qui part du bas à gauche, se déplace horizontalement jusqu’à la moitié de l’espace (50%), puis monte jusqu’en haut (0) pour atteindre le 2e point, puis va tout à fait à droite horizontalement et en bas, pour atteindre le 3e point&nbsp;: 3 points&nbsp;=&nbsp;un&nbsp;triangle&nbsp;!

Tout ce qui ne se trouve pas à l’intérieur de ces limites est simplement découpé et n’apparaît pas. L’élément lui-même garde ses dimensions, bien que le mode de présentation ait changé.

### Formes

Dans ce premier exemple, nous avons utilisé un polygone pour créer une forme et définir un chemin en créant des paires x et y, séparées par des virgules. Mais nous pouvons travailler avec différentes formes, qui prennent des valeurs différentes.

<h3>Cercles</h3>

<div class="clipbox clipCircle"></div>

Pour créer des cercles, nous passons trois valeurs. L’axe des x et des y nous donne les coordonnées du centre du cercle, et le rayon définit sa taille. La syntaxe est la suivante : “dimension du rayon (at) coordonnées du centre”&nbsp;:

    //CSS
    .clipClass {
      clip-path: circle(50% at 50% 50%);
    }

<h3>Ellipses</h3>

<div class="clipbox clipEllipse"></div>

Si vous préférez une forme oblongue, vous pouvez choisir l’[ellipse](http://fr.wikipedia.org/wiki/Ellipse_%28math%C3%A9matiques%29). Pour celle-ci, vous devez fournir quatre valeurs, une valeur sur l’axe des x, une sur l’axe des y, et les deux valeurs correspondant au centre. Ici encore, les coordonnées du centre sont précédées du mot-clé “at”&nbsp;:

    //CSS
    .clipClass {
      clip-path: ellipse(30% 20% at 50% 50%);
    }

<h3>Inset</h3>

<div class="clipbox clipInset"></div>

Si les angles aigus des polygones ne vous plaisent pas et que vous souhaitez créer des rectangles arrondis, utilisez les valeurs “inset”. Inset prend quatre valeurs, correspondant aux positions haut, droit, bas, gauche et permet l’utilisation d’un rayon sur chacune de ces valeurs.

    //CSS
    .clipClass {
      clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
    }

Ce qui se lit comme&nbsp;:

    inset(<haut> <droit> <bas> <gauche> round <rayon-haut> <rayon-droit> <rayon-bas> <rayon-gauche>)

Un peu long ? Bonne nouvelle, il y a un raccourci&nbsp;:

    //CSS
    .clipClass {
      clip-path: inset(25% 0 round 0 25%);
    }

#### Références rapides :

**Cercle** : circle(rayon at x y)

**Ellipse** : ellipse(rayon-x rayon-y at x y)

**Polygone** : polygon(x y, x y, ...)

**Inset** : inset(haut droit bas gauche round rayon-haut rayon-droit rayon-bas rayon-gauche)

### Créer des formes

Les cercles et les formes utilisant les rayons sont limités à quelques valeurs, par conséquent les polygones sont souvent un meilleur choix pour créer des formes complexes. Comme nous pouvons définir autant de points que nous le voulons, nous pouvons découper notre élément dans des formes très variées.

<h3>Bulle de bande dessinée</h3>

<div class="clipbox clipComic"></div>

    //CSS
    .clipClass {
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    }

<h3>Étoile</h3>

<div class="clipbox clipStar"></div>

    //CSS
    .clipClass {
      clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
    }

### Animation

Maintenant que nous maîtrisons mieux les formes et la façon de les produire, nous pouvons nous amuser à créer des effets.

Nous pouvons par exemple avoir une forme qui s’applique au survol, en utilisant une propriété [transition](https://la-cascade.io/transition/) pour créer un effet en douceur. Cependant, nous devons garder à l’esprit qu’il nous faut créer un état initial par défaut, utilisant les mêmes points que ceux qui nous serviront pour notre état modifié.

<div class="clipbox clipAnimate"></div>

    //CSS
    .animateClass {
      clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
      transition: clip-path 0.5s;
    }
    .animateClass:hover {
      clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    }

## Utilisation en production

Comme toujours, pour connaître les détails à jour de la compatibilité vous pouvez consulter [Can I Use](http://caniuse.com/#search=css%20clip-path).

### Retour à notre tâche initiale

Tout ceci parce que nous voulions recréer la navigation Squarespace, vous vous rappelez ? Eh bien maintenant, si nous utilisons le positionnement pour recouvrir un élément par un autre, puis que nous utilisons clip-path pour masquer l’image, nous pouvons simplement montrer l’image de background sans avoir à appliquer de techniques complexes de remplacement d’images.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_https://codepen.io/rachelandrew/pen/vEZOeq" src="//codepen.io/rachelandrew/embed/vEZOeq?height=400&amp;theme-id=light&amp;slug-hash=vEZOeq&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/vEZOeq/">
  Squarespace clip-path</a> de Drew Minns dans <a href="https://codepen.io">CodePen</a></span>
</div>

Je ne sais pas ce que vous en pensez, mais je trouve que l’avenir est de plus en plus géométrique.

Comprendre Clip Path

Créer des sphères en CSS


Les cubes CSS sont une bonne démonstration de l’évolution de CSS ces dernières années, depuis les simples directives relatives aux couleurs et aux dimensions du début jusqu’au langage actuel nous permettant de créer des visuels profonds et créatifs. Ajoutez-y l’animation et vous avez un travail abouti.

Jusqu’à présent, les tutoriels que j’ai trouvés pour créer des cubes en CSS sont longs et mélangent un peu tout, alors j’ai décidé d’écrire cet article qui vous donnera les infos basiques pour créer ce cube. Pour l’idée, je me suis basé sur cette belle réalisation de Mircea Georgescu&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/mirceageorgescu/pen/roblc/">
  CSS only spinning cubes</a> by Mircea Georgescu <a href="https://codepen.io">CodePen</a></span>
</div>

**[Voir la démo de David Walsh](https://davidwalsh.name/demo/css-cube.php)**

## Le HTML

L’élément cube, qui est un container, sera lui-même enveloppé dans une autre `div`.

```
//HTML
<div class="wrap">
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>
```

Chaque face du cube aura son propre élément. Comme vous pouvez l’imaginer, CSS va faire un travail de fou pour le disposer comme il faut.

## Le CSS

Procédons pas à pas, en prenant chaque élément significatif. Le premier élément à avoir du sens est le container de l’animation —&nbsp;il fournira une [perspective CSS](https://developer.mozilla.org/fr/docs/Web/CSS/perspective) pour l’élément en 3D&nbsp;:

```
.wrap {
	perspective: 800px;
	perspective-origin: 50% 100px;
}
```

La perspective en CSS est [très bien expliquée par MDN](https://developer.mozilla.org/fr/docs/Web/CSS/perspective), je ne répèterai pas leur présentation, mais pour mieux comprendre la perspective, je vous recommande de jouer avec les valeurs de la propriété `perspective` et de voir comment cela affecte la démo. Passons maintenant au container du cube qui contiendra toutes les faces&nbsp;:

```
.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
}
```

Le cube aura 200px de large, il aura un positionnement relatif de façon à ce que les faces positionnées absolument restent dans les limites. Nous allons aussi utiliser `preserve-3d` pour que notre élément reste en 3D. Avant d’entrer dans le détail des règles relatives aux faces, nous appliquons quelques styles généraux à chaque face&nbsp;:

```
.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
}
```

Maintenant que nous avons déterminé la position et les dimensions des faces, nous pouvons ajouter les transformations des faces individuelles&nbsp;:

```
.back {
	transform: translateZ(-100px) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}
```

Les valeurs de `rotateY` font pivoter les faces pour montrer le texte à l’angle voulu, tandis que le `translateZ` déplace les éléments d’avant en arrière à l’intérieur de l’empilement. `translateY` est peut-être encore confus pour vous, mais considérez qu’il permet d’élever ou d’abaisser une face pour montrer l’effet 3D à travers les panneaux transparents. Chaque face a ses propres réglages de translation qui la place au bon endroit, là encore je vous conseille de jouer avec ces valeurs pour voir à quoi cela correspond pour chacune.

**[Voir la démo](https://davidwalsh.name/demo/css-cube.php)**

## Rotation horizontale du cube

Évidemment, à quoi servent tous ces éléments 3D s’il n’y a pas d’animation&nbsp;? Réponse&nbsp;: à rien. Alors, voici les étapes qu’il nous reste à franchir pour animer notre cube horizontalement&nbsp;:

```
@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

.cube {
	animation: spin 5s infinite linear;
}
```

Sans doute plus simple que vous ne l’imaginiez, pas vrai&nbsp;? Le texte apparaît comme il faut grâce à la rotation que nous avons implémentée au départ, et j’ai utilisé une animation keyframe au cas où nous voudrions ajouter des choses plus sexy à l’avenir.

## Rotation verticale du cube

Pour faire tourner le cube verticalement, il suffit de changer l’animation en prenant l’axe des Y, pas vrai&nbsp;? Eh bien, malheureusement non. Les panneaux, tels qu’ils sont actuellement, montreraient le texte à l’envers dans certains cas, donc il nous faut revoir la rotation de certains éléments.

```
@keyframes spin-vertical {
	from { transform: rotateX(0); }
	to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
	margin: 0 auto; /* keeps the cube centered */

	transform-origin: 0 100px;
	animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
	transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
	transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
	transform: rotateX(-90deg) translateY(100px);
}
```

...et il nous faut bien sûr changer l’animation.

## Aplatir le cube

Pour supprimer l’aspect 3D du cube et simplement afficher un bloc à chaque fois, supprimez la perspective et l’origine du container&nbsp;:

```
.wrap {
	/* suppression de la perspective */
	perspective: none;
	perspective-origin: 0 0;
}
```

Maintenant, seule une face s’affiche.

**[Voir la démo](https://davidwalsh.name/demo/css-cube.php)**

J’espère que cet article a suffisamment simplifié la façon dont un cube 3D est constitué en CSS et qu’il vous aura donné envie de créer les vôtres. Et ne vous découragez pas si vous rencontrez des problèmes, ça m’est arrivé également&nbsp;! J’espère voir bientôt ce que vous aurez inventé&nbsp;!


Créer un cube en CSS

Le cerveau humain est programmé pour être attentif au mouvement. L’ajout d’animations à votre site web ou à votre appli est une façon efficace d’attirer l’attention de vos utilisateurs vers vos produits ou vers une partie importante de votre interface.

Lorsqu’elles sont bien faites, les animations peuvent ajouter interaction et feedback, contribuer à l’émotion et au plaisir apportés par la navigation et ajouter de la personnalité à votre interface. En fait, animer signifie donner de la vie.

<blockquote cite="https://abookapart.com/products/designing-for-emotion"><p>Le premier objectif du design émotionnel est de faciliter la communication humaine. Si nous faisons bien notre boulot, l’ordinateur passe au second plan et c’est une véritable personnalité qui apparaît.</p>
<p><cite>Aaron Walter, Design Émotionnel</cite></p></blockquote>

Dans cet article, nous allons passer en revue les bases de l’animation CSS. Vous pouvez retrouver tous les exemples qui suivent dans [cette page CodePen](https://codepen.io/collection/nbEZgX/).

## Les blocs constitutifs de l’animation.

Les animations CSS sont constituées de deux blocs de base.

1. Les keyframes, qui définissent les étapes et les styles d’animation.
2. Les propriétés d’animation, qui assignent les @keyframes à un élément CSS spécifique et définissent la façon dont il est animé.

Donc une définition initiale, puis sa mise en oeuvre.

### Bloc #1: Keyframes

Les keyframes constituent les fondations de l’animation. Elles définissent ce à quoi va ressembler l’animation à chaque étape de son évolution dans le temps. Chaque `@keyframe` est composée de&nbsp;:

- **Nom de l’animation** : un nom que vous donnez à l’animation pour la décrire et servir de référence, par exemple `bounceIn` (rebond).
- **Étapes de l’animation** : chaque étape est représentée par un pourcentage. `0%` représente le début de l’animation et `100%` l’état final de l’animation. On peut ajouter autant d’étapes intermédiaires que l’on veut.
- **Propriétés CSS** : Les propriétés CSS définies à chaque étape.

Prenons un exemple simple de `@keyframes` que j’ai appelé “bounceIn” (rebond). Ce `@keyframes` comprend trois étapes. À la première étape (0%) l’élément a une opacité égale à 0 et il est redimensionné à 10% de sa taille, au moyen de `CSS transform scale`. À la seconde étape (60%), l’élément commence à apparaître et il est redimensionné à 120% de sa taille normale. À l’étape finale (100%), il redescend à sa taille normale.

Les `@keyframes` sont ajoutés à votre feuille de style CSS :

```css
@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
```

Si vous avez besoin d’une petite révision sur les propriétés Transform de CSS, vous pouvez consulter [cette page de MDN](https://developer.mozilla.org/fr/docs/Web/CSS/transform) qui fait un point complet et synthétique.

### Bloc #2: Propriétés d’animation

Une fois définies les `@keyframes`, les propriétés d’animation doivent être ajoutées pour pouvoir faire fonctionner votre animation. C'est l’étape de mise en oeuvre.

Les propriétés d’animation font deux choses :

- Elles assignent les `@keyframes` aux éléments que vous voulez animer
- Elles définissent la façon dont ils sont animés.

Les propriétés d’animation sont ajoutées aux sélecteurs CSS (ou aux éléments) que vous voulez animer. Vous devez impérativement ajouter les deux propriétés d’animation suivantes pour que votre animation puisse fonctionner :

- `animation-name`: le nom de l’animation, tel que vous l’avez défini dans `@keyframes`.
- `animation-duration` : la durée de l’animation en secondes (p.ex. 5s) ou en millisecondes (p.ex. 200ms).

Dans notre exemple de `bounceIn`, nous allons ajouter `animation-name` et `animation-duration` à la div que nous voulons animer.

```css
div {
  animation-duration: 2s;
  animation-name: bounceIn;
}
```

Il existe aussi une syntaxe raccourcie :

```css
div {
  animation: bounceIn 2s;
}
```

En ajoutant `keyframes` et les propriétés d'animation, nous avons une animation simple&nbsp;!



<figure role="group"><img src="/images/animation-bounceIn.gif" alt="Le texte 'bounce in' (rebond) s'avance vers le lecteur, puis recule, comme s'il rebondissait en-dessous du spectateur."><figcaption></figcaption></figure>

## Raccourcis des propriétés d’animation

Chaque propriété d’`animation` peut être définie individuellement, mais pour la clarté et la concision du code il est recommandé d’utiliser les raccourcis. Toutes les propriétés peuvent être ajoutées en une seule ligne dans l’ordre suivant :

```xml
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
```

N’oubliez pas que les deux premières propriétés sont obligatoires.

### Un mot sur les préfixes

À ce jour, de nombreux navigateurs Webkit utilisent encore la version préfixée -webkit des animations, keyframes et transitions. Jusqu’à ce qu’elles adoptent la version standard, il nous faudra donc inclure à la fois la version non préfixée et la version préfixée -webkit dans votre code (pour la bonne lisibilité du code, nous n’utilisons ici que la version non préfixée).

Voici à quoi ressemblent les keyframes et les animations avec leur préfixe -webkit&nbsp;:

```css
div {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
```

```css
@-webkit-keyframes bounceIn {
  /* styles */
}
@keyframes bounceIn {
  /* styles */
}
```

Pour vous faciliter la vie, vous pouvez utiliser [Bourbon](https://www.bourbon.io/), une bibliothèque de mixins Sass qui contient une liste à jour des préfixes vendeurs pour tous les navigateurs modernes. Voici comment générer les animations et keyframes préfixées avec Bourbon&nbsp;:

```css
div {
  @include animation(bounceIn 2s);
}
```

```css
@include keyframes(bouncein) {
  /* styles */
}
```

## Les autres propriétés d’animation

Outre les propriétés obligatoires `animation-name` et `animation-duration`, vous pouvez personnaliser et complexifier vos animations à l’aide des propriétés suivantes&nbsp;:

- `animation-timing-function`
- `animation-delay`
- `animation-iteration-count`
- `animation-direction`
- `animation-fill-mode`
- `animation-play-state`

Passons-les en revue.

### Animation-timing-function

`animation-timing-function` définit l’allure (au sens de vitesse) de votre animation. Vous pouvez spécifier son timing à l’aide des options prédéfinies : `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `initial`, `inherit`, ou bien vous pouvez créer vos propres fonctions de timing à l’aide de [courbes de Bézier](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). Lea Verou a créé un outil en ligne très efficace pour cela.



<figure><img src="/images/animation-timing.gif" alt="Des balles de couleur qui tombent puis remontent pour disparaître (et l'animation se répète)"><figcaption></figcaption></figure>

La valeur par défaut est `ease`, qui démarre lentement, accélère, puis ralentit à l’arrivée. Vous pouvez lire une description de chaque fonction [ici](https://www.w3schools.com/cssref/css3_pr_animation-timing-function.php).

La syntaxe CSS :

```css
animation-timing-function: ease-in-out;
```

La syntaxe raccourcie (recommandée) :

```css
animation: [animation-name] [animation-duration]
  [animation-timing-function];
animation: bounceIn 2s ease-in-out;
```

### Animation-delay

`animation-delay` vous permet de spécifier à quel moment une animation (ou une partie d’animation) va commencer. Une valeur positive (p.ex. `2s`) fera débuter l’animation 2 secondes après qu’elle ait été déclenchée. L’élément demeurera inanimé jusque là. Une valeur négative (p.ex. `-2s`) fera débuter l’animation immédiatement, mais à 2 secondes de son développement (donc comme si elle avait déjà commencé il y a deux secondes). La valeur de retard (`delay`) est exprimée secondes ou en millisecondes.



<figure><img src="/images/animation-delay.gif" alt="Un soleil, puis un nuage qui le recouvre partiellement, puis la pluie qui tombre du nuage."><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-delay: 5s;
```

La syntaxe raccourcie (recommandée) :

```css
animation: [animation-name] [animation-duration]
  [animation-timing-function] [animation-delay];
animation: bounceIn 2s ease-in-out 3s;
```

### Animation-iteration-count

`animation-iteration-count` spécifie le nombre de fois que l’animation doit être jouée. Les valeurs possibles sont&nbsp;:

- `(un nombre)` - un nombre spécifique d’itérations (la valeur par défaut est `1`)
- `infinite` - l’animation se répète indéfiniment
- `initial` - fixe le décompte d’itération à sa valeur par défaut
- `inherit` - hérite de son parent



<figure><img src="/images/animation-iteration.gif" alt="Un cœur qui bat"><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-iteration-count: 2;
```

La syntaxe raccourcie (recommandée) :

```css
animation: [animation-name] [animation-duration]
  [animation-timing-function] [animation-delay]
  [animation-iteration-count];
animation: bounceIn 2s ease-in-out 3s 2;
```

### Animation-direction

La propriété `animation-direction` spécifie si l’animation doit elle jouée à l’endroit, à l’envers ou dans les deux sens.

Les valeurs possibles sont :

- `normal` (valeur par défaut) - L’animation est jouée à l’endroit. Chaque cycle part du point initial (0%) pour aller jusqu’au point final (100%).
- `reverse` - L’animation est jouée à l’envers. Chaque cycle part du point final (100%) pour aller jusqu’au point initial (0%).
- `alternate` - L’animation change de sens à chaque cycle, elle va de 0% à 100% puis repart de 100% pour aller à 0% etc.
- `alternate-reverse` - L’animation change de sens à chaque cycle, mais cette fois-ci elle va de 100% à 0% puis repart de 0% pour aller à 100% etc.



<figure><img src="/images/animation-direction.gif" alt="Une montagne, des nuages qui passent dans un sens puis dans l'autre, le soleil qui se lève puis qui se couche et devient rouge au moment de disparaître."><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-direction: alternate;
```

La syntaxe raccourcie (recommandée) :

```xml
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];
animation:  bounceIn 2s ease-in-out 3s 3 alternate;
```

### Animation-fill-mode

`animation-fill-mode` spécifie si les styles d’animation sont visibles avant ou après que l’animation ne soit jouée. Cette propriété n’est pas très claire de prime abord, mais une fois qu’on l’a comprise elle peut être très utile.

Par défaut, l’animation n’affectera pas les styles de l’élément avant qu’elle n’ait commencé (s’il y a un retard — _delay_ — d’animation) ou après que l’animation soit terminée. La propriété `animation-fill-mode` peut prendre le pas sur ce comportement, avec les valeurs possibles suivantes&nbsp;:

- `backwards` - Avant l’animation (pendant le retard), les styles du keyframe initial (0%) sont appliqués à l’élément.
- `forwards` - Après que l’animation se soit achevée, les styles définis dans le dernier keyframe (100%) sont conservés par l’élément.
- `both` - L’animation appliquera les règles de backwards et forwards qui étendent les propriétés avant et après l’animation.
- `normal` (valeur par défaut) - L’animation n’applique aucun style à l’élément avant ou après l’animation.

Dans l’exemple suivant, on voit que le rectangle turquoise conserve ses dimensions finales car l’option forwards est activée, alors que le rectangle rouge revient à ses dimensions initiales dès la fin de l’animation (comportement par défaut).



<figure><img src="/images/animation-fill.gif" alt="Deux rectangles s'avancent en même temps, le turquoise s'agrandit puis reste aux dimensions finales, le rouge s'agrandit puis revient d'un coup à ses dimesions initiales."><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-fill-mode: forwards;
```

La syntaxe raccourcie (recommandée) :

```xml
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
animation:  bounceIn 2s ease-in-out 3s 3 forwards;
```

### Animation-play-state

`animation-play-state` spécifie si l’animation est en train d’être jouée ou si elle est en mode pause. Reprendre une animation en mode pause la fait démarrer là où elle était arrêtée.

Les valeurs possibles sont :

- `playing` - L’animation est en cours
- `paused` - L’animation est en mode pause.



<figure><img src="/images/animation-play.gif" alt="Un chronomètre turquoise avec une aiguille qui tourne, et qui s'arrête au survol de la souris, puis reprend sa course quand la souris se retire."><figcaption></figcaption></figure>

Exemple :

```css
.div:hover {
  animation-play-state: paused;
}
```

### Animations multiples

Pour ajouter des animations multiples à un sélecteur, il suffit de séparer les valeurs par une virgule. Voici un exemple :

```css
.div {
  animation: slideIn 2s, rotate 1.75s;
}
```

## En avant les animations !

Et voilà ! Avec ces propriétés basiques, les animations potentielles sont infinies. La meilleure façon d’apprendre est de se lancer et de créer toutes les animations qui vous passent par la tête.

Voici quelques ressources pour vous y aider :

[Upcase for designers](https://thoughtbot.com/upcase/design) - Une communauté d'apprentissage en ligne proposant des cours sur les techniques de design et de développement front.

[CodePen](https://codepen.io/) - Un terrain de jeu CSS où vous pouvez éditer votre code et voir immédiatement le résultat. CodePen comprend déjà Autoprefixer, vous n’aurez donc pas à vous soucier des préfixes vendeurs. Il fonctionne également avec les langages préprocesseurs de votre choix (Sass, Less, ainsi que haml pour html).

[Animate.css](https://animate.style/) - Une bibliothèque d’animations avec laquelle jouer pour explorer les possibilités infinies d’animation.

CSS animation, une introduction

Guide des animations SVG (SMIL)


La propriété `transform` nous permet de manipuler visuellement un élément en l'inclinant, le faisant pivoter, le translatant ou le mettant à l'échelle&nbsp;:

```css
.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}
```

Même avec une hauteur et une largeur déclarées, cet élément sera maintenant mis à l'échelle à vingt fois sa taille d'origine&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gpQYwO/d5d50055d95ceecbf94068e75a502c97" src="//codepen.io/t_afif/embed/gpQYwO/d5d50055d95ceecbf94068e75a502c97?height=320&amp;theme-id=light&amp;slug-hash=gpQYwO/d5d50055d95ceecbf94068e75a502c97&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/gpQYwO/d5d50055d95ceecbf94068e75a502c97">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

En donnant deux valeurs à cette fonction, nous l'étirons horizontalement de la première valeur (2) et verticalement de la seconde (0.5). Dans l'exemple suivant, l'élément sera désormais deux fois plus large et deux fois moins haut que l'élément d'origine&nbsp;:

```css
.element {
  transform: scale(2, 0.5);
}
```

Nous pouvons être plus précis, en n'utilisant pas la fonction de raccourci&nbsp;:

```css
transform: scaleX(2);
transform: scaleY(0.5);
```

Mais `scale()` n'est qu'une des nombreuses fonctions de transformation disponibles.

## Valeurs

`scale()`&nbsp;: Affecte la taille de l'élément. Cela s'applique également à la taille de la police, au padding, à la hauteur et à la largeur d'un élément. Il s'agit également d'une fonction raccourcie pour les fonctions scaleX() et scaleY().

`skewX()` et `skewY()`&nbsp;: Incline un élément vers la gauche ou la droite, comme pour transformer un rectangle en parallélogramme. skew() est un raccourci qui combine skewX() et skewY() en acceptant les deux valeurs.

`translate()`&nbsp;: Déplace un élément latéralement ou de haut en bas.

`rotate()`&nbsp;: Fait pivoter l'élément dans le sens des aiguilles d'une montre à partir de sa position actuelle.

`matrix()`&nbsp;: Une fonction qui n'est probablement pas destinée à être écrite à la main, mais qui combine toutes les transformations en une seule.

`perspective()`&nbsp;: N'affecte pas l'élément lui-même, mais affecte les transformées des éléments descendants en 3D, leur permettant d'avoir tous une perspective de profondeur cohérente.

- [Skew](/articles/la-propriete-css-transform#skew)
- [Rotate](/articles/la-propriete-css-transform#rotate)
- [Translate](/articles/la-propriete-css-transform#translate)
- [Valeurs multiples](/articles/la-propriete-css-transform#valeursmultiples)
- [Matrix](/articles/la-propriete-css-transform#matrix)
- [3D transform](/articles/la-propriete-css-transform#3dtransform)

<h2 id="skew">Skew</h2>

```css
/* Skew points along the x-axis */
.element {
  transform: skewX(25deg);
}

/* Skew point along the y-axis */
.element {
  transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */
.element {
  transform: skew(25deg, 25deg);
}
```

Les fonctions de transformation `skewX` et `skewY` inclinent un élément dans un sens ou dans l'autre. N'oubliez pas&nbsp;: il n'existe pas de propriété raccourcie pour incliner un élément, vous devrez donc utiliser les deux fonctions. Dans l'exemple ci-dessous, nous pouvons incliner un carré de 100px x 100px vers la gauche et la droite avec `skewX`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_BNGMRy/cb9ab0a908241806e3eff88b57f15693" src="//codepen.io/t_afif/embed/BNGMRy/cb9ab0a908241806e3eff88b57f15693?height=320&amp;theme-id=light&amp;slug-hash=BNGMRy/cb9ab0a908241806e3eff88b57f15693&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/BNGMRy/cb9ab0a908241806e3eff88b57f15693">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Dans cet exemple, nous inclinons un élément verticalement avec avec `skewY`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_jPQpzp/d7be823bca05649502f63fc8490c6d93" src="//codepen.io/t_afif/embed/jPQpzp/d7be823bca05649502f63fc8490c6d93?height=320&amp;theme-id=light&amp;slug-hash=jPQpzp/d7be823bca05649502f63fc8490c6d93&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/jPQpzp/d7be823bca05649502f63fc8490c6d93">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Utilisons maintenant skew() pour combiner les deux&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_povNBmQ" src="//codepen.io/t_afif/embed/povNBmQ?height=320&amp;theme-id=light&amp;slug-hash=povNBmQ&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/https://codepen.io/team/css-tricks/pen/povNBmQ">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2 id="rotate">Rotate</h2>

```css
.element {
  transform: rotate(25deg);
}
```

Ce CSS fait tourner un élément dans le sens des aiguilles d'une montre par rapport à sa position d'origine, tandis qu'une valeur négative le ferait tourner dans le sens inverse. Voici un exemple animé simple où un carré tourne en continu de 360 degrés toutes les trois secondes&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_VLVBdK/d31be2118a19782d2c4fcfb048351ccf" src="//codepen.io/t_afif/embed/VLVBdK/d31be2118a19782d2c4fcfb048351ccf?height=320&amp;theme-id=light&amp;slug-hash=VLVBdK/d31be2118a19782d2c4fcfb048351ccf&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/VLVBdK/d31be2118a19782d2c4fcfb048351ccf">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Nous pouvons utiliser les fonctions `rotateX`, `rotateY` et `rotateZ`, comme suit&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c" src="//codepen.io/t_afif/embed/MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c?height=460&amp;theme-id=light&amp;slug-hash=MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2 id="translate">Translate</h2>

```css
.element {
  transform: translate(20px, 10px);
}
```

Cette fonction de transformation déplace un élément latéralement, ou de haut en bas. Pourquoi ne pas utiliser simplement haut/gauche/bas/droite&nbsp;? C'est parfois un peu confus. Personnellement, je considère ces fonctions comme des fonctions de mise en page/positionnement (elles sont mieux supportées par les navigateurs de toute façon) et cette fonction comme un moyen de déplacer ces éléments dans le cadre d'une transition ou d'une animation.

Ces valeurs pourraient être n'importe quelle valeur de longueur, comme `10px` ou `2.4em`. Une valeur déplacera l'élément vers la droite (les valeurs négatives vers la gauche). Si une deuxième valeur est fournie, cette deuxième valeur le déplacera vers le bas (valeurs négatives vers le haut). Vous pouvez aussi être plus spécifique&nbsp;:

```css
transform: translateX(value);
transform: translateY(value);
```

Il est important de noter qu'un élément utilisant la fonction `transform` ne fera pas circuler les autres éléments autour de lui. Quand nous utilisons la fonction de transformation ci-dessous, qui fait sortir le carré vert de sa position initiale, nous remarquons que le texte qui l'entoure reste fixe en place, comme si le carré était un élément block&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e" src="//codepen.io/t_afif/embed/eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e?height=460&amp;theme-id=light&amp;slug-hash=eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Il convient également de noter que `translate` sera [accéléré par le matériel](https://www.alsacreations.com/astuce/lire/1565-acceleration-materielle-au-service-de-vos-animations-css.html) quand vous animez cette propriété, contrairement à `position: absolute`.

<h2 id="valeursmultiples">Valeurs multiples</h2>
Avec une liste séparée par un espace, nous pouvons ajouter plusieurs valeurs à la propriété `transform`&nbsp;:

```css
.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}
```

Il est important de noter qu'il y a un ordre dans lequel ces transformations seront effectuées, dans l'exemple ci-dessus `skew` sera effectué en premier et _ensuite_ l'élément sera mis à l'échelle.

<h2 id="matrix">Matrix</h2>

La fonction de transformation matricielle peut être utilisée pour combiner toutes les transformations en une seule. C'est un peu comme un raccourci de transformation, sauf que je ne crois pas qu'il soit vraiment destiné à être écrit à la main. Il existe des outils comme [the Matrix Resolutions](https://meyerweb.com/eric/tools/matrix/), qui peuvent convertir un groupe de transformations en une seule déclaration matricielle. Peut-être que dans certaines situations, cela peut réduire la taille du fichier, bien que des micro-optimisations _peu amicales pour les auteurs_ comme celle-ci ne valent probablement pas d'y passer trop de temps.

Pour les curieux, ceci&nbsp;:

```css
rotate(45deg) translate(24px, 25px)
```

...peut aussi être représenté comme&nbsp;:

```css
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)
```

<h2 id="3dtransform">3D Transform</h2>

La plupart des propriétés que nous avons passées en revue ont des versions 3D.

```css
translate3d(x, y, z)
translateZ(z)
```

La troisième valeur de `translate3d` ou la valeur de `translateZ` rapprochent l'élément de l'observateur, les valeurs négatives l'en éloignent.

```css
scale3d(sx, sy, sz)
scaleZ(sz)
```

La troisième valeur dans `scale3d` ou la valeur dans `scaleZ` affectent la mise à l'échelle le long de l'axe z (par exemple, la ligne imaginaire sortant directement de l'écran).

```
rotateX(value)
rotateY(value)
rotate3d(x, y, z)
```

`rotateX` et `rotateY` feront tourner un élément dans l'espace 3D autour de ces axes. `rotate3d` nous permet de spécifier un point dans l'espace 3D autour duquel faire tourner l'élément.

```css
matrix3d(…)
```

Un moyen programmatique de décrire une transformation 3D dans une grille 4×4. Personne n'en écrira jamais une à la main, _jamais_.

```css
perspective(value)
```

Cette valeur n'affecte pas l'élément lui-même, mais elle affecte les transformées 3D des éléments descendants, leur permettant d'avoir tous une perspective de profondeur cohérente.

### Plus d'information

- [La doc MDN](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transforms) sur transform et [son utilisation](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms).
- [La documentation de David DeSandro](https://3dtransforms.desandro.com/) sur 3D transforms
- Surfin’ Safari: [3D transforms](https://www.webkit.org/blog/386/3d-transforms/)
- [La spec W3C](https://drafts.csswg.org/css-transforms-1/) sur CSS3 transforms
- [Intro à CSS 3D transforms](https://24ways.org/2010/intro-to-css-3d-transforms/) par David DeSandro
- [Astuces pour utiliser CSS translateZ() et perspective()](https://www.digitalocean.com/community/tutorials/css-translatez-and-perspective) (DigitalOcean)


La propriété CSS Transform


L’[animation d’un SVG au moyen de CSS](/articles/animer-un-svg-avec-css/) est facile, cependant CSS ne peut pas animer toutes les propriétés SVG animables. Par exemple, les propriétés qui définissent la forme présente d’un élément ne peuvent être modifiées ou animées en CSS. Il est toutefois possible de le faire grâce à SMIL. Sara Soueidan en parle dans son remarquable [Guide des animations SVG (SMIL)](/articles/guide-des-animations-svg/) ici-même, mais je voudrais éclairer ce point plus précisément ici.

**Le plus important à retenir&nbsp;: les formes doivent avoir le même nombre de points**  
Autrement, l’animation ne marchera pas. La forme ne disparaîtra pas, rien de grave ne se produira, mais rien ne s’animera.

Il n’est pas toujours évident de savoir combien de points constituent une forme en regardant l’attribut `d` (dans le cas d’un `path`) ou `point` (dans le cas d’un polygone), le mieux est parfois de commencer avec une forme simple dans un programme d’édition vectorielle.

### 1. Commencer avec la forme la plus complexe

Dans cette démo, je vais partir d’une étoile, qui sera ma forme la plus compliquée, pour la morpher en _check_ de case à cocher (une “hirondelle”).

<figure><img src="/images/star.png" alt=""/></figure>

Gardez une copie de ce SVG, puis utilisez une autre version pour construire la forme suivante.

### 2. Construire la forme suivante avec les mêmes points

Déplacez les points pour obtenir la forme désirée.

<figure><img src="/images/star-illustrator-gif-compressor.gif" alt="dans illustrator, on déplace les points pour former une hirondelle"/></figure>

<figure><img src="/images/check-illustrator-gif.png" alt=""/></figure>

### 3. Utiliser la forme de départ dans le SVG lui-même

    //SVG
    <svg viewBox="0 0 194.6 185.1">

      <polygon fill="#FFD41D" points=" ... les points de la forme 1 ... ">

      </polygon>

    </svg>

### 4. Ajouter un élément d’animation vers la forme suivante

    //SVG
    <svg viewBox="0 0 194.6 185.1">

      <polygon fill="#FFD41D" points=" ... les points de la forme 1 ... ">

        <animate attributeName="points" dur="500ms" to=" ... les points de la forme 2 ... " />

      </polygon>

    </svg>

Cette animation sera lancée immédiatement, il nous faut corriger cela.

### 5. Déclencher l’animation quand on le veut

SMIL permet de traiter les interactions telles que clics et hovers, tant que tout se passe à l’intérieur de SVG. Par exemple, vous pourriez lancer l’animation lorsqu’elle est cliquée&nbsp;:

    //SVG
    <polygon id="shape" points=" ... les points de la forme 1 ... ">

      <animate begin="shape.click" attributeName="points" dur="500ms" to=" ... les points de la forme 2 ... />

    </polygon>

Pas mal, mais un peu limité car il ne permet de traiter que les clics sur ce SVG précisément. Mais quid si cet élément fait partie d’un bouton et qu’on veut lancer l’animation lorsque c’est le bouton qui est cliqué&nbsp;?

Tout d’abord, donnons un ID à notre animation, afin de permettre à JavaScript de la retrouver, puis empêchons tout déclenchement intempestif&nbsp;:

    //SVG
    <animate id="animation-to-check" begin="indefinite" ... />

Nous avons maintenant référencé cette animation et nous pouvons la déclencher comme nous l’entendons&nbsp;:

    //JavaScript
    animationToCheck = document.getElementById("animation-to-check");

    // Lancez ceci sur un clic, ou de la façon que vous voulez
    // (voir démo ci-dessous)
    animationToCheck.beginElement();

### Démo

Cette démo contient en fait quatre animations&nbsp;: une pour morpher l’étoile en hirondelle, une pour modifier la couleur de la forme, et les mêmes dans l’animation inverse. Lorsqu’on clique sur le bouton, on vérifie d’abord l’état présent du bouton, puis on déclenche les animations appropriées.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_DpFfE" src="//codepen.io/chriscoyier/embed/DpFfE?height=200&amp;theme-id=light&amp;slug-hash=DpFfE&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="200" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/DpFfE/">
  Shape Morph Button</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>


Le morphing en SVG

Plongée en profondeur dans les pseudo-éléments :before et :after

Portal CSS


Nous avons vu récemment [le morphing en SVG](/articles/le-morphing-en-svg/), c’est à dire une forme qui se mue en une autre. Aujourd’hui, nous allons voir des formes qui se phagocytent entre elles&nbsp;! C’est le _shape bobbling_, vous savez, cet effet d’aspiration qu’on peut voir par exemple dans [cette vidéo de gouttes de mercure](https://www.youtube.com/watch?v=31CE2BYicyU#t=45) ou, de manière inverse, dans les images de [division cellulaire](http://fr.wikipedia.org/wiki/Division_cellulaire).

<figure role="group"><img src="/images/mercury-compressor.gif" alt="une goutte de mercure en aspire une autre"/></figure>

Je ne sais pas qui a découvert le premier que cet effet était réalisable sur le web, mais <a href='http://codepen.io/lbebber/pen/lFdHu/'>la première démo que j’en aie jamais vue</a> était de Lucas Bebber. Puis celle-ci, de [Felix Hornoiu](http://codepen.io/felixhornoiu/pen/EjDwF/) (GIF ralenti pour mieux observer l’effet)&nbsp;:

<figure role="group"><img src="/images/bubbles-compressor.gif" alt="deux cercles fusionnent"/><figcaption><a href="http://codepen.io/chriscoyier/pen/lIBAg?editors=110">Démo&nbsp;visible&nbsp;ici</a>.</figcaption></figure>

### Une astuce simple, à partir de filtres pour le flou et le contraste

Le flou rend l’élément... flou, et le contraste lutte contre le flou. Si vous contrastez suffisamment, votre forme retrouve (à peu près) ses contours&nbsp;:

<figure role="group"><img src="/images/blur-vs-contrast-compressor.png" alt="tableau flou (en x) et contraste (en y)"/></figure>

Là où ça devient intéressant, c’est que lorsque deux éléments floutés (mais forcés à ne pas apparaître comme tels) s’approchent l’un de l’autre, leurs flous “potentiels” créent suffisamment de contraste couleur “potentiel” pour que l’on ait l’impression que les formes se connectent et se mélangent.

<figure role="group"><img src="/images/blur-shape.png" alt=""/><figcaption><a href="http://codepen.io/chriscoyier/pen/lIBAg?editors=110">Démo&nbsp;visible&nbsp;ici</a>.</figcaption></figure>

Je trouve qu’il est plus aisé de faire fonctionner l’effet en floutant la forme, mais en ajoutant le contraste sur le contexte, c’est à dire sur le container de l’effet (ci-dessous .stage).

    //CSS

    .stage {
      /* doit être explicite, pour que le contraste fonctionne */
      background: white;

      /* des trucs bizarres arrivent au contact des bords, cachez
      éventuellement l’overflow */
      padding: 30px;

      -webkit-filter: contrast(20);
      filter: contrast(20);
    }
    .dot {
      border-radius: 50%;
      width: 50px;
      height: 50px;

      /* doit être une couleur très contrastante, p.ex. gris clair sur
      blanc ne marchera pas */
      background: black;

      -webkit-filter: blur(15px);
      filter: blur(15px);
    }

Et ça devient vraiment drôle quand on ajoute une animation pour déclencher la danse des phagocytes. Voici une démo dans laquelle vous pouvez jouer avec les valeurs de flou, de contraste et de luminosité (cette dernière a un effet sur le flou)&nbsp;:

<p data-height="45" data-theme-id="5394" data-slug-hash="bopGc" data-default-tab="result" data-user="chriscoyier" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/bopGc/'>Blobbing Playground</a> by Chris Coyier (<a href='http://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

### Compatibilité navigateurs

Aujourd’hui, à peu près tout le monde, WebKit/Blink, Firefox à partir de FF35, donc&nbsp;: Chrome / Safari / Opera / Firefox / iOS / Android. Pas mal. Le seul qui manque à l’appel est IE.

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : Pour voir une superbe application de cet effet, voyez_ [l’effet Gooey](https://la-cascade.io/leffet-gluant-avec-svg/) _de Lucas Bebber_.


Shape Blobbing


_Cet article est la réunion de deux articles de Louis Lazaris sur les transitions CSS3_.

La façon la plus courante d'utiliser les transitions CSS3 est en association avec la pseudo-classe `:hover`.

Voici une transition typique, en pur CSS, qui modifie la couleur d'un lien lorsqu'on passe la souris&nbsp;:

    a, a:link, a:visited {
        color: lightblue;
        transition: color .4s linear;
    }

    a:hover {
        color: white;
    }

On anime la propriété `color` quand on passe la souris sur un lien, c'est très simple et vous l'avez sans doute déjà vu ou utilisé. Mais l'utilisation des transitions n'est pas limitée à `:hover`.

Vous pouvez animer les propriétés CSS grâce à des transitions qui utilisent d'autres techniques CSS, dont voici quelques-unes.

## Transition avec :active

La pseudo-classe `:active` cible [tout élément qui est en cours d'activation](http://reference.sitepoint.com/css/pseudoclass-active). La façon la plus simple d'activer un élément est de cliquer dessus, c'est le _mouse down_.

Le CSS qui suit et la démo qui l'accompagne montrent l'utilisation de `:active` avec une transition CSS3 qui imitent un événement `mousedown`&nbsp;:

    .box {
        width: 300px;
        height: 300px;
        background: #222;
        transition: width 2s ease, height 2s ease;
    }

    .box:active {
        width: 500px;
        height: 500px;
    }

Avec ce code, la largeur et la hauteur de la boîte sont animées lorsque vous maintenez le bouton de votre souris enfoncé. Lorsque vous relâchez le bouton, la boîte s'anime pour revenir à ses dimensions d'origine. Voici [la démo](http://www.impressivewebs.com/demo-files/transition-active/).

## Transition avec :focus

Vous pouvez utiliser la pseudo-classe `:focus` pour réaliser une animation similaire. Cette fois-ci, nous allons utiliser un formulaire dans lequel nous animerons la largeur de tout élément qui reçoit le focus&nbsp;:

    input, textarea {
        width: 280px;
        transition: width 1s ease;
    }

    input:focus, textarea:focus {
        width: 340px;
    }

Et voici [la démo](http://www.impressivewebs.com/demo-files/transition-focus/).

## Transition avec :checked

Vous pouvez animer des checkboxes et des boutons radio lorsqu'ils sont &ldquo;checkés&rdquo; - même si l'impossibilité de changer réellement leur style impose des limitations.

Nous changerons simplement la largeur, comme si nous appliquions une indentation à la checkbox sélectionnée&nbsp;:

    input[type="checkbox"]:checked {
        height: 20px;
        transition: width 1s ease;
    }

    input[type="checkbox"]:checked {
        width: 30px;
    }

Et voici [la démo](http://www.impressivewebs.com/demo-files/transition-checked/).

## Transition avec :disabled

Continuons avec nos formulaires, cette fois nous allons mélanger des transitions CSS3 et un peu de jQuery pour animer la couleur de background d'éléments du formulaire à chaque fois qu'ils sont désactivés via l'attribut `disabled`&nbsp;:

    input[type="text"], textarea {
        background: #e2e2e2;
        transition: background 1s ease;
    }

    input:disabled, textarea:disabled {
        background: #666666;
    }

Et le jQuery, vite fait, qui ajoute/supprime l'attribut `disabled`&nbsp;:

    $(function() {
        $('input[type="radio"]').click(function() {
            if ($(':checked').val() === "other") {
                $('input[type="text"]').removeAttr("disabled");
            } else {
                $('input[type="text"]').attr("disabled", "disabled");
            }
        });
    });

Lorsque le dernier bouton radio est sélectionné (celui qui a une valeur de `other`), l'attribut de la boîte de texte est supprimé (`removeAttr`). Si une autre option est sélectionnée, l'attribut `disabled` est ajouté à nouveau au dernier bouton.

La pseudo-classe `:disabled` dépend de l'existence de cet attribut, donc l'animation ne se produira que lorsque l'attribut est ajouté ou supprimé. Voici [la démo](http://www.impressivewebs.com/demo-files/transition-disabled/).

## Transitions avec les media queries

Cette dernière animation est sans doute la moins susceptible d'être utilisée en pratique, parce que les seuls à modifier la taille de la fenêtre pour voir ce qui se passe sont les développeurs web.

Cela dit, c'est une autre façon d'utiliser les animations CSS3. La page d'accueil de [Modernizr](http://modernizr.com) s'en sert.

Voici le code&nbsp;:

    .box {
        width: 440px;
        height: 440px;
        background: #222;
        margin: 0 auto;
        transition: width 2s ease, height 2s ease;
    }

    @media only screen and (max-width : 960px) {
        .box {
            width: 300px;
            height: 300px;
        }
    }

Dans cet exemple nous animons deux propriétés différentes simultanément, en séparant les deux par une virgule. Le media query diminue la taille de la boîte lorsque la largeur de l'écran est inférieure à 961px. Vous pouvez modifier la largeur de votre écran pour voir [la démo en action](http://www.impressivewebs.com/demo-files/transition-media-queries/).

## Un piège à éviter

Comme on vient de le voir, les transitions peuvent être déclenchées de multiples façons, et même via JavaScript. La transition en elle-même ne dépend d'aucun événement. Bien que ce soit l'événement qui déclenche la transition, elle en est totalement indépendante (comme il se doit dans une bonne séparation présentation / comportement).

C'est pourquoi vous remarquerez un comportement inattendu si vous placez la transition dans la partie de votre CSS qui déclenche l'événement.

En voici une illustration avec cette transition simple qui utilise la pseudo-classe `:hover`&nbsp;:

    a:link, a:visited {
        font-size: 40px;
        transition: font-size 1s ease;
    }

    a:hover {
        font-size: 100px;
    }

Vous pouvez voir l'effet dans [cette démo](http://jsbin.com/aweruj/334/edit). Très simple, non&nbsp;? Vous passez le curseur sur le lien, et la `font-size` s'anime (transitionne) de 40px à 100px. Vous sortez du lien, et elle transitionne de 100px à 40px.

Essayons maintenant ceci&nbsp;:

    a:link, a:visited {
        font-size: 40px;
    }

    a:hover {
        font-size: 100px;
        transition: font-size 1s ease;
    }

Qu'y a-t-il de différent&nbsp;? Eh bien au lieu de mettre la propriété transition sur l'état naturel du lien, je l'ai mise sur son état hover. Et le résultat&nbsp;? Vous l'avez sans doute deviné, mais voici [la démo](http://jsbin.com/umaliy/46/edit). La transition étant maintenant sur l'état hover, elle ne se produit que sur cet état, c'est à dire lorsque hover se produit. Quand vous sortez du lien (c'est à dire quand vous revenez à l'état naturel du lien), la propriété change instantanément de 100px à 40px, comme s'il n'y avait pas de transition, ce qui est le cas.

Ce n'est pas grand chose, mais il faut le garder à l'esprit si vous placez vos transitions sur l'état de l'événement plutôt que sur l'état naturel de l'élément. Dans certains cas, ça peut être l'effet souhaité, comme nous allons le voir maintenant.

## Un cas d'utilisation

On pourrait imaginer que la transition sur hover soit beaucoup plus longue que la transition sur la sortie du hover, voici ce que ça pourrait donner&nbsp;:

    a:link, a:visited {
        font-size: 40px;
        transition: font-size 1s ease;
    }

    a:hover {
        font-size: 100px;
        transition: font-size 3s ease;
    }

Et [la démo](http://jsbin.com/itihoc/70/edit). Dans cet exemple, la transition sur hover dure trois secondes alors que la sortie ne dure qu'une seconde (changement de la partie transition-duration de la notation raccourcie). Ça peut être pratique dans les situations où vous souhaitez que la partie déclenchée par l'utilisateur se déroule d'une certaine façon alors que le &ldquo;retour à la normale&rdquo; peut se faire rapidement.


Subtilités de CSS3 Transitions


J’ai [déjà montré](http://thenewcode.com/495/Make-A-CSS3-Animated-Image-Slider) comment réaliser un carrousel d’images de largeur fixe en CSS. De plus en plus, les développeurs web ont besoin de solutions qui non seulement se redimensionnent selon le viewport, mais aussi offrent de bonnes performances sur les mobiles. La solution responsive détaillée ici est particulièrement adaptée à ces objectifs, car elle se passe totalement de JavaScript et repose uniquement sur CSS.

L’idée est assez proche de mon tutoriel précédent&nbsp;: une “bande d’images” contenant toutes les photos de notre carrousel se déplace à l’intérieur d’une “fenêtre” dont le rôle est d’empêcher qu’on ne voie les éléments qui sont en dehors. Pour cet exemple, nous aurons besoin de quatre images, mais en pratique vous pouvez réaliser une bande contenant autant d’images que vous le souhaitez. La seule condition est que **toutes les images doivent avoir la même taille**.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/ehKpi">
  Responsive CSS Image Slider</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2>Créer un cadre responsif avec une bande d’images</h2>

Tout d’abord nous avons besoin de rendre l’élément carrousel responsif. Pour cela, nous commençons avec le HTML suivant&nbsp;:

    //HTML
    <div id="slider">
      <figure>
        <img src="austin-fireworks.jpg" alt>
        <img src="taj-mahal.jpg" alt>
        <img src="ibiza.jpg" alt>
        <img src="ankor-wat.jpg" alt>
        <img src="austin-fireworks.jpg" alt>
      </figure>
    </div>

(Je laisse l’[attribut `alt`](/articles/articles/bien-utiliser-lattribut-alt/) vide pour la clarté, il faudra le remplir pour l’[accessibilité](/tags/accessibilite/) et pour le SEO). Remarquez que la même image est placée au début et à la fin de la bande, pour permettre à l’animation de faire une boucle en douceur.

Nous donnons à la fenêtre une largeur de 80% pour la rendre responsive, et une largeur maximum (`max-width`) qui correspond à la largeur naturelle d’une image individuelle (1000px dans notre exemple), car nous ne souhaitons pas qu’une image soit agrandie :

    //CSS
    div#slider { width: 80%; max-width: 1000px; }

<figure role="group"><img src="/images/image-strip-compressor.jpeg" alt=""/><figcaption>La bande de 5 images, avec à gauche la “fenêtre” contenant une image. La bande fait 5 fois (500%) la largeur de la fenêtre.</figcaption></figure>

Dans notre CSS, la largeur de l’élément `figure` est un pourcentage, qui est un multiple de la `div` qui le contient. Autrement dit, si la bande d’images contient cinq images, et que notre `div` n’en montre qu’une, la `figure` est 5x plus large, c’est à dire 500% la largeur de la `div` container&nbsp;:

    //CSS
    div#slider figure {
      position: relative;
      width: 500%;
      margin: 0;
      padding: 0;
      font-size: 0;
      text-align: left;
    }

La `font-size: 0` aspire l’air autout de l’élément `figure` en retirant tout espace entre les images et autour. `position: relative` permet à la `figure` d’être déplacée facilement pendant l’animation. `text-align: left` est là en raison d’un bug de Safari&nbsp;5 pour Windows.

Nous devons répartir les images de manière régulière à l’intérieur de la bande. Le calcul est très simple&nbsp;: Si nous considérons que l’élément `figure` fait 100% de large, chaque image doit prendre 1/5 de l’espace horizontal&nbsp;:

100% / 5 = 20%

Ce qui nous conduit à la déclaration CSS suivante&nbsp;:

    //CSS
    div#slider figure img { width: 20%; height: auto; float: left; }

(Ici aussi, `float: left` sert à corriger un bug de Win Safari&nbsp;5).

Enfin, nous cachons ce qui dépasse (_overflow_) de la `div`&nbsp;:

    //CSS
    div#slider { width: 80%; max-width: 1000px; overflow: hidden }

<h2>Animer la bande</h2>

Il nous faut maintenant déplacer la bande de droite à gauche. Si on considère que la `div` container fait 100% de large, chaque mouvement de la bande vers la gauche sera mesuré en incréments de cette distance&nbsp;:

    //CSS
    @keyframes slidy {
      0% { left: 0%; }
      20% { left: 0%; }
      25% { left: -100%; }
      45% { left: -100%; }
      50% { left: -200%; }
      70% { left: -200%; }
      75% { left: -300%; }
      95% { left: -300%; }
      100% { left: -400%; }
    }

Chaque image du carrousel sera affichée dans la `div` pour 20% de la durée totale de l’animation, le temps de déplacement étant de 5%.

Il ne nous reste plus qu’à appeler notre animation pour que les choses commencent (le code est indiqué ici sans préfixes constructeurs, pour la simplicité, mais il ne faudra pas les oublier, vous pouvez utiliser Autoprefixer pour cela).

    //CSS
    div#slider figure {
      position: relative;
      width: 500%;
      margin: 0;
      padding: 0;
      font-size: 0;
      left: 0;
      text-align: left;
      animation: 30s slidy infinite;
    }

Comme vous le voyez, réaliser un _responsive carousel_ est à maints égards plus facile qu’un carrousel fixe&nbsp;!

**Note**&nbsp;: Si vous voulez une solution plus facile et plus rapide, [CSSslidy](http://thenewcode.com/871/CSS-Slidy-20-Captions--more) est un petit JavaScript qui auto-génère des keyframes d’animation CSS3 pour n’importe quel ensemble d’images.

Les photos sont utilisées avec la permission de l’excellent [Trey Radcliff](http://www.stuckincustoms.com/).

Vous pouvez retrouver le code de cet article sur Codepen&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/dudleystorey/pen/ehKpi">
  Responsive CSS Image Slider</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>


animation

Ressources complémentaires