Exporter (0) Imprimer
Développer tout

Transitions

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les transitions CSS3 (Cascading Style Sheets, niveau 3). Les transitions vous permettent de créer des animations simples en modifiant progressivement les valeurs des propriétés CSS (Cascading Style Sheets, feuilles de style en cascade) au cours d’une période de temps donnée. Par exemple, vous pouvez modifier la taille et la couleur d’un objet sur une période de 10 secondes. Les opérations que vous avez pu accomplir précédemment à l’aide d’une association complexe de CSS et de JavaScript peuvent maintenant être réalisées en utilisant simplement CSS. Les transitions CSS3 sont définies par le World Wide Web Consortium (W3C) dans la spécification « CSS Transitions Module Level 3 », laquelle n’est pour l’instant qu’au stade d’ébauche.

Remarque  Pour fonctionner avec Internet Explorer 10 et les applications du Windows Store en JavaScript, les propriétés et les événements décrits dans cette rubrique nécessitaient auparavant le préfixe Microsoft "-ms-". Ce préfixe n’est plus nécessaire, mais il est tout de même reconnu. Afin de garantir la compatibilité à l’avenir, les applications qui utilisent le préfixe Microsoft avec les propriétés de transition doivent être mises à jour en conséquence.

Cette rubrique donne une vue d’ensemble des propriétés qui constituent les transitions CSS3. Vous y trouverez également un exemple simple d’utilisation des transitions.

Pour obtenir une liste des propriétés CSS auxquelles vous pouvez appliquer des transitions, voir Propriétés d’animation et de transition.

Propriété transition-property

Vous utilisez la propriété transition-property pour identifier une ou plusieurs propriétés CSS auxquelles les effets de la transition sont appliqués quand une nouvelle valeur de propriété est spécifiée.

PropriétéDescription

transition-property

Indique le nom des propriétés CSS auxquelles l’effet de transition est appliqué quand une nouvelle valeur de propriété est spécifiée. La propriété transition-property peut avoir la pour valeur une liste de propriétés CSS séparées par virgules ou l’une des valeurs suivantes :

  • none  Aucun effet de transition n’est appliqué lorsqu’une nouvelle valeur de propriété est spécifiée. Toutes les propriétés de transition sont ignorées.
  • all  Il s’agit de la valeur par défaut. Un effet de transition est appliqué à chaque propriété qui prend en charge les transitions lorsqu’une nouvelle valeur pour la propriété est spécifiée.

 

En plus d’appliquer des transitions aux propriétés CSS plus basiques comme les propriétés de positionnement, de couleur, de polices, etc., vous pouvez également appliquer des transitions aux propriétés CSS nouvellement prises en charge telles que opacity et border-radius, ainsi qu’aux transformations 2D et 3D.

Notez que lorsque vous interrompez une transition elle est automatiquement annulée.

Propriété transition-duration

La propriété transition-duration définit la durée nécessaire à la réalisation d’une transition.

PropriétéDescription

transition-duration

Spécifie une ou plusieurs valeurs de temps séparées par une virgule, chacune indiquant la durée nécessaire à la réalisation d’une transition entre l’ancienne et la nouvelle valeur. Chaque valeur est exprimée sous la forme d’un nombre à virgule flottante suivi d’un indicateur d’unité de temps (ms ou s).

 

Propriété transition-timing-function

La propriété transition-timing-function permet de modifier la vitesse d’une transition au cours de sa durée en décrivant le mode de calcul des valeurs intermédiaires utilisées durant la transition. Pour cela, spécifiez une fonction de chronométrage d’animation basée sur une courbe de Bézier cubique, qui nécessite quatre paramètres.

Vous pouvez spécifier la courbe explicitement à l’aide de la fonction cubic-bezier et entrer les quatre valeurs manuellement ou vous pouvez choisir des mots clés de fonction parmi ceux disponibles, chacun correspondant à une fonction de chronométrage couramment utilisée.

PropriétéDescription

transition-timing-function

Spécifie une ou plusieurs fonctions de chronométrage séparées par une virgule qui définissent les valeurs de propriété intermédiaires utilisées au cours d’une transition sur un ensemble de propriétés d’objet correspondantes. Les valeurs possibles sont les suivantes. Pour obtenir la description de chaque fonction, voir la page de référence sur transition-timing-function.

  • cubic-bezier(x1,y1,x2,y2)  Les quatre paramètres de cette fonction doivent être des valeurs à virgule flottante comprises entre 0 et 1. Les valeurs correspondent aux coordonnées x et y des points P1 et P2 de la courbe de Bézier cubique. Pour les propriétés autres que opacity et color, la fonction de courbe cubic-bezier accepte les coordonnées y en dehors de la plage standard de 0 à 1. Cela vous permet de créer des effets « élastiques » ou « de rebond ».
  • ease  Il s’agit de la valeur par défaut. La fonction de chronométrage accélère graduellement au début, exécute l’animation à la vitesse optimale, puis ralentit graduellement à la fin.
  • linear  Cette fonction de chronométrage a une vitesse constante du début à la fin.
  • ease-in  Cette fonction de chronométrage accélère graduellement au début.
  • ease-out  Cette fonction de chronométrage ralentit graduellement à la fin.
  • ease-in-out  Cette fonction de chronométrage accélère au début, puis ralentit graduellement à la fin.
  • steps  Cette fonction de chronométrage définit une fonction de chronométrage progressive et nécessite deux paramètres. Le premier paramètre spécifie le nombre d’intervalles, le second paramètre facultatif spécifie le point dans l’intervalle à partir duquel la valeur de la propriété change. Le second paramètre est limité par défaut aux valeurs de début et de fin.

 

Propriété transition-delay

La propriété transition-delay vous permet de retarder le démarrage d’une transition ou de faire en sorte que la transition paraisse déjà être en cours. Si la valeur de la propriété transition-delay est négative, la transition s’exécutera dès son application, mais elle apparaîtra comme ayant commencé à s’exécuter au décalage spécifié ou pendant son cycle d’exécution.

PropriétéDescription

transition-delay

Spécifie une ou plusieurs valeurs de décalage séparées par une virgule dans une transition (la durée écoulée depuis le démarrage d’une transition) avant que celle-ci ne s’affiche pour un ensemble de propriétés d’objet correspondantes. Chaque valeur est exprimée sous la forme d’un nombre à virgule flottante suivi d’un indicateur d’unité de temps (ms ou s).

 

Propriété transition

La propriété raccourcie transition regroupe les quatre propriétés de transition décrites précédemment.

PropriétéDescription

transition

Spécifie un ou plusieurs ensembles de propriétés de transition séparés par des espaces pour un ensemble de propriétés d’objet correspondantes. Les valeurs des propriétés de transition doivent être définies dans l’ordre suivant :

Si vous disposez de plusieurs ensembles constitués des quatre valeurs des propriétés de transition, vous devez les séparer par une virgule.

 

Exemple

Pour voir des transitions CSS3 en action, consultez la démonstration des transitions sur le site IE Test Drive.

L’exemple simple suivant montre comment utiliser les transitions CSS3 pour faire varier graduellement la valeur d’une propriété CSS appliquée à un élément div.

Pour commencer, nous allons créer un élément div avec du texte auquel nous allons appliquer des styles :


<!DOCTYPE html>
<html lang="en-us">

<head>
<style type="text/css">
body {
  padding: 10px;
  font: bold 20pt "Segoe UI";
}
div {
  width: 250px;
  background-color: lime;
  padding: 10px;
}
</style>
</head>

<body>

<div>
  Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
  Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>

</body>

</html>


Affichez cette page.

Nous allons faire lentement disparaître le div en faisant varier la propriété opacity lorsque l’utilisateur clique et appuie (ou touche et appuie) sur le div. Nous allons d’abord définir les valeurs « avant » et « après » pour la propriété d’opacité. Nous allons donner au div une opacité avec la valeur "1" pour commencer, puis une opacité avec la valeur "0" lorsque le div est « actif ». Pour cela, nous allons ajouter des propriétés d’opacité pour que la section de style apparaisse comme il est indiqué ici :


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


Maintenant, quand vous cliquez et maintenez appuyé (ou maintenez le doigt appuyé) sur le div vert, il disparaît immédiatement et reste invisible tant que vous cliquez ou appuyez dessus. Afficher cette page.

Nous allons maintenant ajouter des propriétés de transition CSS pour atténuer graduellement l’opacité. Identifions d’abord la propriété à laquelle appliquer des effets de transition à l’aide de la propriété transition-property :


transition-property: opacity;

Ajoutons ensuite une durée à la transition à l’aide de la propriété transition-duration :


transition-duration: 5s;

À présent, définissons la fonction de chronométrage à utiliser avec la propriété transition-timing-function. Pour que la transition div soit régulière, nous allons utiliser la fonction de chronométrage linéaire :


transition-timing-function: linear;

Nous pouvons également retarder la transition d’une seconde à l’aide de la propriété transition-delay :


transition-delay: 1s;

Avec ces quatre propriétés, la propriété opacity opérera une transition pendant 5 secondes après 1 seconde. Vous pouvez également utiliser la propriété raccourcie de transition pour regrouper ces quatre propriétés :


transition: opacity 5s linear 1s;

Affichez cette page.

Pour appliquer des effets de transition à plusieurs propriétés d’un élément, définissez les propriétés sur plusieurs valeurs séparées par une virgule. Par exemple, nous pouvons ajouter un changement de couleur à l’exemple précédent. D’abord, ajoutons une propriété background-color au sélecteur div :active. Modifions ensuite la propriété transition comme suit :


transition: opacity 5s linear 1s, background-color 2s ease;

Cette propriété ajoute une transition de couleur pourpre pendant deux secondes à l’aide de la fonction pratique de chronométrage. Étant donné qu’il n’y a pas de valeur de retard, la transition commence immédiatement. Affichez cette page.

Événements DOM de transitions

Internet Explorer 10 et les applications du Windows Store en JavaScript définissent deux événements de transition :

transitionstart

L’événement transitionstart se produit au début de la transition.

transitionend

L’événement transitionend se produit à la fin de la transition. Si la transition est supprimée avant qu’elle soit réalisée, l’événement ne se déclenchera pas.

Cet exemple applique des transitions à un élément <div>, puis déclenche les événements transitionstart et transitionend pour changer le texte contenu dans la zone. Testez l’exemple en ligne.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


Informations de référence sur les API

Transitions

Exemples et didacticiels

Comment donner vie à votre page Web à l’aide d’animations, de transitions et de transformations CSS

Démonstrations du site Internet Explorer Test Drive

Hands On: Transitions
Transformations 3D CSS3 dans IE10
Bringing pages alive with CSS Transforms & Animations

Billets IEBlog

Animations pleine page avec CSS
Renforcer la personnalité d’un site grâce aux transitions et animations CSS3

Spécification

Transitions CSS

Rubriques associées

Embellir vos applications avec les transitions CSS3

 

 

Afficher:
© 2015 Microsoft