Comment utiliser les transitions et les transformations CSS3 pour créer des animations

Publié: 2017-03-21

Des animations intéressantes peuvent être créées avec CSS3 en utilisant des transformations et des transitions. Les transformations sont utilisées pour faire passer un élément d'un état à un autre. Des exemples seraient la rotation, le déplacement, l'inclinaison et la mise à l'échelle des éléments. Sans transition, un élément en cours de transformation passerait brusquement d'un état à un autre. Pour éviter cela, une transition peut être ajoutée afin que vous puissiez contrôler le changement, le rendant plus fluide.

Comment utiliser les transformations CSS3

Il existe quelques types de transformations couramment utilisées. Nous nous concentrerons sur des exemples 2D pour ce didacticiel, mais il est bon de savoir que des choses intéressantes peuvent également être faites avec des transformations 3D. (Une fois que vous aurez maîtrisé la 2D, la 3D sera beaucoup plus facile !)

Dans les exemples suivants, les rectangles d'origine sont dans un vert plus foncé et les transformés sont un peu plus transparents.

Traduire

La méthode translate() déplace un élément de sa position actuelle vers une nouvelle.
Avec ce code, le rectangle ajusté est déplacé de 40 pixels vers la droite et de 100 pixels vers le bas par rapport à la position actuelle.

css3-transitions-transforms-traduire
 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

Tourner

La méthode rotate() fait pivoter un élément dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre de la valeur en degrés spécifiée. Ce code fait pivoter le rectangle dans le sens des aiguilles d'une montre de 40 degrés.

css3-transitions-transformations-rotation
-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

Échelle

La méthode scale() augmente ou diminue la taille d'un élément (selon les paramètres donnés pour la largeur et la hauteur). Dans cet exemple, le rectangle ajusté est deux fois plus grand que sa largeur d'origine et trois fois plus grand que sa hauteur d'origine.

css3-transitions-transformations-échelle
 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

Incliner X

Avec skewX() , seul l'axe des x sera affecté. Ce rectangle est incliné de 30 degrés le long de l'axe des x :

css3-transitions-transforms-skew-x
  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

SkewY

C'est la même idée, mais sur l'axe des ordonnées. La méthode skewY() incline un élément le long de l'axe y de l'angle défini. Ce rectangle est incliné de 30 degrés le long de l'axe y.

css3-transitions-transforms-skew-y
-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

Fausser

Si vous souhaitez incliner les axes x et y, vous pouvez le faire en un seul endroit. La méthode skew() incline un élément le long des axes x et y en utilisant les angles spécifiés. L'exemple suivant incline l'élément rectangle de 30 degrés le long de l'axe des x et de 20 degrés le long de l'axe des x.

css3-transitions-transforms-skew
-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

Matrice

C'est là que les choses deviennent intéressantes, mais aussi plus efficaces dans la bonne situation. Si vous faites beaucoup de transformations et que vous ne voulez pas toutes les écrire individuellement, ces transformations 2D peuvent être combinées avec la méthode matrix() .

Voici un schéma de base à suivre :

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Juste un avertissement, il faut quelques recherches pour trouver les valeurs dans la matrice. Voici un guide utile pour commencer.

css3-transitions-transforms-matrice

Pour faire cet exemple, voici les valeurs de la matrice :

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

Comment utiliser les transitions CSS3

Maintenant que les transformations ont été couvertes, il est important de noter qu'elles sont fréquemment utilisées avec les transitions. Cela aura plus de sens dans les exemples de conception suivants.

Il est bon de garder à l'esprit que les valeurs peuvent être personnalisées pour faire la transition entre deux états d'un élément comme vous le souhaitez. Considérez-le comme un moyen de contrôler la vitesse d'animation lors de la modification des propriétés CSS. Un exemple que vous avez probablement rencontré est si vous survolez un bouton. Il est courant de voir un "assombrissement lent" plutôt qu'une simple couleur plus foncée instantanée lorsque vous passez la souris dessus. Cet « assombrissement lent » a été créé avec une transition.

Si vous spécifiez beaucoup de valeurs, la sténographie sera utile. La propriété CSS transition est une propriété abrégée pour transition-property , transition-duration , transition-timing-function et transition-delay .

Détails de la transition

La transition-property spécifie la propriété CSS où la transition sera appliquée, puisque vous pouvez appliquer une transition à une propriété individuelle. Des exemples d'application d'une transition à une propriété individuelle seraient sur un arrière-plan ou une transformation. Si vous souhaitez cibler toutes les propriétés du site, la propriété transform peut être définie sur all .

La transition-duration est utile pour que les modifications d'une propriété se produisent sur une période spécifiée plutôt qu'immédiatement. Vous verrez les secondes et les millisecondes comme valeurs possibles.

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

La propriété CSS transition-timing-function permet d'établir une courbe d'accélération, de sorte que la vitesse de la transition puisse varier sur sa durée. Il existe de nombreuses options à expérimenter.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

Le transition-delay est assez explicite. Une valeur spécifiée définit le nombre de secondes ou de millisecondes à attendre avant que l'effet de transition ne démarre. Initial définira la propriété à sa valeur par défaut. Si inherit est spécifié, cela signifie qu'il hérite de la propriété de son élément parent.

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

Voici la configuration abrégée de base pour une transition :

div {
  transition: [property] [duration] [timing-function] [delay];
}

La séquence abrégée complète :

div {
  transition: background 1s linear 0.5s;
}

Planification d'animations

Avant de créer des animations vraiment détaillées, il est bon de prendre du recul avant de créer quelque chose de totalement fou (surtout si ce sera dans le public sur le web). Il n'y a rien de mal à ajouter une touche amusante, mais il est tentant de trop animer. Le mouvement que vous créez doit transmettre du sens et améliorer l'expérience utilisateur, et non en détourner l'attention. Cela dit, il est temps de créer !

Je tiens à signaler qu'il existe des gifs animés dans ce didacticiel pour montrer les animations. Les gifs sont répétés, ce qui ne serait généralement pas fait pour les dessins. Le but de les répéter est uniquement à des fins de démonstration.

Déplacer une image avec la propriété CSS transform

Avant d'entrer dans des transformations et des transitions compliquées, parlons des coordonnées sur une grille d'axes. (Attention : cela peut rappeler des souvenirs de papier millimétré de cours de mathématiques.) Les coordonnées sont utilisées pour déplacer l'image.

Coordonnées X et Y

Les choses se présenteront légèrement différemment de ce à quoi vous pourriez vous attendre. La valeur -y est au-dessus de l'axe x. HTML et CSS utilisent ce qu'on appelle un "système de coordonnées cartésiennes inversées", car les pages Web commencent en haut à gauche et se lisent vers le bas.

css3-transitions-transforms-coordinate-basics

Animation 1 : Transformation de base avec mouvement horizontal

Nous avons brièvement abordé la base de translate() et comment il peut déplacer un élément. Lorsqu'il est mis en pratique, il peut vraiment faire flotter votre bateau, littéralement. Comme nous l'avons appris ci-dessus, la méthode translate() déplace un élément de sa position actuelle (selon les paramètres donnés pour l'axe des x et l'axe des y).

Le premier projet consistera à déplacer un graphique sous-marin. Les sous-marins ont besoin de prendre l'air de temps en temps, nous allons donc soigneusement les styliser avec translate() .

Pour le déplacer de sa position initiale à l'aide de transform: translate(x,y) , deux nouvelles valeurs devront être spécifiées. Pour que le sous-marin se déplace vers la droite et vers le haut, la valeur x doit être positive et la valeur y doit être négative. Si la valeur y est définie sur 0, elle se déplacera uniquement vers la droite et non vers le haut.

Sous-marin prenant son envol avec transform()

Dans cet exemple, nous allons déplacer l'objet de 200 pixels vers la droite et de 25 pixels vers le haut. La syntaxe est transform: translate(200px,-25px); et l'objet se déplacera sur le vol stationnaire de .underwater . En créant les styles pour le mouvement dans .underwater:hover .move-right , l'action se déroulera en survol.

Voici le HTML de départ :

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>
css3-transitions-transforms-basic-right-move

Voir ça sur Codepen.

Il ne faut vraiment pas beaucoup de CSS pour faire cette animation de base :

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

Comme vous pouvez le voir, nos coordonnées tomberaient dans le carré supérieur droit. En vol stationnaire, le sous-marin se déplace jusqu'aux nouvelles coordonnées à cause de la transformation.

css3-transitions-transforms-coordinate-detail

Les choses semblent fluides grâce à la transition. La transition-duration a été fixée à 2sec , ce qui n'est pas trop rapide pour cette animation. La transition-timing-function a été réglée sur une entrée ease-in-out ce qui lui donne un début et une fin plus lents. Si la durée était augmentée à quelque chose de plus grand, cela serait très apparent.

Animation de base 2 : mouvement horizontal avec images clés et animation

Transform est utilisé un peu différemment dans cet exemple. Les images clés et la propriété d'animation seront utilisées pour créer la prochaine animation.

Notions de base sur les images clés

À l'intérieur @keyframes , vous définissez les styles et les étapes de l'animation. Voici l'exemple que nous allons utiliser, ce qui aidera à donner un effet "fondu en se déplaçant vers le bas":

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

Les valeurs de transformation sont incorporées dans les images clés. Le placement d'origine est défini sur 0 %, et à 100 %, la position se déplacera vers le bas de 30 px.

Bases de l'animation

Pour utiliser l'animation CSS3, vous spécifiez des images clés pour l'animation.

Comment utiliser les requêtes de fonctionnalité CSS

Le monde de la conception Web est en constante évolution et il est passionnant de suivre les nouvelles tendances de conception en CSS. Si vous êtes l'un des premiers à adopter CSS, vous avez peut-être déjà hâte d'utiliser des choses comme CSS Grid...

Comme conçu ci-dessus, @keyframes contient les styles que l'élément aura à certains moments.

Chaque fois que vous faites cela, assurez-vous de donner à l'animation un nom descriptif. Dans ce cas, nous utilisons fadeOut . Toute classe qui inclut le fadeOut sera appliquée. Dans les étapes de l'animation, le "de" est défini sur 0 % et le "à" est défini sur 100 %. Cet exemple est assez simple avec seulement les deux étapes, mais il peut certainement y avoir plus d'étapes ajoutées entre les deux.

Actions spécifiques avec des sous-propriétés d'animation

La propriété animation est utilisée pour appeler @keyframes dans un sélecteur CSS. Les animations peuvent avoir et auront souvent plus d'une sous-propriété.

Les images clés définissent à quoi ressemblera l'animation ; les sous-propriétés définissent des règles spécifiques pour l'animation. Le timing, la durée et d'autres détails clés sur la progression de la séquence d'animation sont tous inclus dans les sous-propriétés.

Voici quelques exemples de sous-propriétés d'animation :

  • Animation-name : nom de la @keyframesat-rule , qui décrit les images clés de l'animation. Le nom fadeOut dans l'exemple précédent est un exemple de animation-name .
  • Durée de l'animation : durée nécessaire à une animation pour effectuer un cycle complet.
  • Animation-timing-function : synchronisation de l'animation, en particulier comment l'animation passe par les images clés. Cette fonction a la capacité d'établir des courbes d'accélération. Les exemples sont linear , ease , ease-in , ease-out , ease-in-out ou cubic-bezier .
  • Animation-delay : Délai entre le moment où l'élément est chargé et le début de l'animation.
  • Animation-iteration-count : nombre de fois que l'animation doit se répéter. Vous voulez que l'animation dure indéfiniment ? Vous pouvez spécifier infinite pour répéter l'animation indéfiniment.
  • Direction de l'animation : cela détermine si l'animation doit ou non changer de direction à chaque passage de la séquence ou revenir au point de départ et se répéter.
  • Animation-fill-mode : valeurs appliquées par l'animation avant et après son exécution.
  • Animation-play-state : avec cette option, vous pouvez mettre en pause et reprendre la séquence d'animation. Les exemples sont none , forwards , backwards ou both .
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

Voici à quoi cela ressemblerait écrit en sténographie:

animation: 4s ease-in-out 1 paused fadeInDown;

Voici la structure HTML :

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

La classe de fadeInDown fait monter et descendre le sous-marin et le contenu.

css3-transitions-transforms-submarine-push-text

Rendre l'animation plus fluide en ajustant les images clés

Avec quelques images clés supplémentaires, nous pouvons rendre l'animation beaucoup plus fluide.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}
sous-marin-push-text-timing-smooth-example

Voir ça sur Codepen.

Réglage du timing de l'animation

L'ajout de plus d'images clés a aidé à lisser l'animation, mais nous pouvons ajouter un peu plus d'interactivité avec plus d'images clés et un délai de texte sur la div qui contient tout le texte. C'est un effet amusant de faire rebondir le sous-marin sur le texte, donc avoir le retard aligné avec le mouvement du sous-marin permet cela.

Le HTML aura les classes effectives appliquées :

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

Et voici le CSS mis à jour qui permet l'animation interactive :

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
sous-marin-push-text-timing

Voir ça sur Codepen.

Barre de progression cubique-bézier dans l'animation CSS3

Il est temps de célébrer la progression de notre animation en créant une barre de progression !

Tous les concepts que nous avons couverts se réuniront pour créer quelque chose comme ça. Une barre de progression est un élément d'interface utilisateur très courant, donc créer quelque chose de fonctionnel comme celui-ci vous aidera à voir comment d'autres éléments Web peuvent être animés.

Voici le HTML de départ : 

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

Et le CSS pour lui donner vie :

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}
css3-transitions-transforms-loading-bar

Dans le premier jeu d'images clés, la largeur va de 0 à 100% avec une durée de deux secondes. Les images clés dans progressMotion contrôlent l'opacité.

Courbe de Bézier CSS

La fonction cubic-bezier() peut être utilisée avec la propriété transition-timing-function pour contrôler la façon dont une transition changera de vitesse sur sa durée. Vous le verrez dans l'animation. Vous voyez comment ça démarre un peu plus lentement puis accélère le rythme ?

css3-transitions-transforms-bezier

Il est utile d'imaginer une enveloppe de Bézier comme un carré. Le coin inférieur gauche et le coin supérieur droit sont des endroits où se trouvent des points clés, qui sont les P0 et P3. Ceux-ci sont toujours définis sur (0,0) et (1,1), qui ne changent pas. Cependant, P1 et P2 peuvent être déplacés avec la fonction cubic-bezier() si vous spécifiez de nouveaux points avec une valeur x ou y.

  • x1 est la coordonnée x du point de contrôle p1
  • y1 est la coordonnée y du point de contrôle p1
  • x2 est la coordonnée x du point de contrôle p2
  • y2 est la coordonnée y du point de contrôle p2

Voici quelques exemples de valeurs :

x1 = 0,7
y1 = 0,16
x2 = 0,2
y2 = .9

Ainsi, un exemple pourrait ressembler à ceci :

cubic-bezier(.7,.16,.2,.9)

La barre de progression est un excellent exemple de la façon dont un Bézier peut personnaliser le minutage d'une animation. Avec des transformations, des transitions et de nombreuses autres options, des animations personnalisées peuvent facilement être créées. Espérons que voir ces exemples d'animation CSS3 de base vous a aidé à voir quelles autres possibilités existent.

Et ensuite : les plugins WordPress que vous allez adorer

Téléchargez cet ebook pour obtenir une liste de nos plugins les plus recommandés pour les développeurs ! Nous avons trouvé que tous ces plugins étaient simples à utiliser, pas trop performants sur votre site et tout simplement fiables.