Les transitions CSS3

1. Les transitions

Pour déclencher une transition, il faut qu’un événement soit détecté avec par exemple une pseudo-classe : :hover, :active ou :focus.

Vous devez indiquer quelles propriétés vous souhaitez utiliser avec la propriété transition-property.

Vous indiquez ensuite la durée de cette transition avec la propriété transition-duration.

2. Les propriétés CSS

Voici la liste des propriétés CSS accessibles avec le module Transition :

La propriété transition-property accepte aussi deux mots-clés prédéfinis :

1. L’objectif

Nous allons mettre en place une transition très simple : une image se déplaçant horizontalement.

2. Le code nécessaire

Nous avons une image placée dans une boîte <div> :

<div id="deplacement"><img src="lion.jpg" alt="Lion" /></div> 

Nous créons un sélecteur d’identification pour cette boîte <div>. Nous positionnons cet élément :

#deplacement { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
} 

3. Les propriétés de la transition

Avec la propriété transition-property, nous indiquons quelle est la propriété CSS à modifier : transition-property: left;.

Avec la propriété transition-duration, nous indiquons la durée de cette transition : transition-duration: 2s;. Les unités à utiliser sont la seconde : s et la milliseconde : ms.

Nous avons donc ce sélecteur :

#deplacement { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    transition-property: left; 
    transition-duration: 2s; 
} 

Maintenant, dernière étape, indiquons la nouvelle valeur de la propriété left et l’événement...

1. La cinétique

La propriété transition-timing-function permet de déterminer la cinétique de la transition. Elle admet six valeurs sous la forme de mots-clés :

Voilà les courbes de Bézier utilisées pour ces effets de cinétique :

Source du schéma : https://fglt.fr/css/les-transitions-css3/

Voici la syntaxe à utiliser :

#deplacement { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    transition-property: left; 
    transition-duration: 2s; 
    transition-timing-function: ease-in; 
} 

2. Le démarrage de la transition

La propriété transition-delay permet de déterminer quand démarre...

1. L’objectif

Nous allons créer un menu tout simple, avec deux transitions qui vont intervenir au survol de la souris sur les liens :

2. La mise en forme du menu

Créez un menu dans une liste <ul>.

<ul id="navigation"> 
    <li><a href="#">Accueil</a></li> 
    <li><a href="#">Références</a></li> 
    <li><a href="#">Contactez-moi</a></li> 
</ul> 

Créez les styles CSS pour mettre en forme ce menu :

#navigation li { 
    list-style: none; 
} 
#navigation a { 
    display: block; 
    float: left; 
    width: 100px; 
    padding: 3px; 
    margin-right: 20px; 
    border: 1px solid #333; 
    background-color: lightyellow; 
    text-align: center; 
    color: black; 
} 

La couleur d’arrière-plan des liens a est jaune clair : background-color: lightyellow.

La couleur du texte des liens a est noire : color: black.

Voilà l’affichage :

3. Les transitions

Dans le style...

1. L’objectif

Nous allons créer un diaporama très simple, juste pour utiliser des transformations et des transitions. Les images apparaissent avec une transformation de mise à l’échelle pour les afficher avec une taille réduite. Au survol de la souris, l’image est agrandie et déplacée vers la gauche avec une transition.

2. La structure du diaporama

Nous allons utiliser une structure pure HTML5, avec les éléments section, figure et figcaption :

<section id="diaporama"> 
    <figure> 
        <img src="photo1.jpg" /> 
        <figcaption>Hippopotame</figcaption> 
    </figure> 
    <figure> 
        <img src="photo2.jpg" /> 
        <figcaption>Tigre</figcaption> 
    </figure> 
    <figure> 
        <img src="photo3.jpg" /> 
        <figcaption>Zèbre</figcaption> 
    </figure> 
    <figure> 
        <img src="photo4.jpg" /> 
       ...

1. L’objectif

Nous allons créer un menu « à tiroirs ». Les « tiroirs » sont des boîtes <div> qui vont apparaître progressivement au survol d’un item du menu.

Cet exemple est inspiré du site CSS3CREATE : http://www.css3create.com/Menu-avec-slider-effet-transition

2. La structure du menu

Le menu est inséré dans un élément section identifié, dans une liste ul. Chaque libellé du menu est dans un lien a, dans un item li de la liste.

<section id="menu"> 
<ul> 
    <li> 
        <a href="#" class="lien">Pomme</a> 
    </li> 
    <li> 
        <a href="#" class="lien">Poires</a> 
    </li> 
    <li> 
        <a href="#" class="lien">Bananes</a> 
    </li> 
    <li> 
        <a href="#" class="lien">Fraises</a> 
    </li> 
</ul> 
</section> 

Les boîtes <div> des tiroirs sont placées dans l’élément li. Les boîtes <div> contiennent dans cet exemple un élément d’en-tête h3 et un paragraphe p.

<section id="menu"> 
<ul> 
    <li> 
        <a href="#" class="lien">Pomme</a> 
        <div> 
            <h3>Les pommes</h3> 
 ...

1. L’objectif

Nous allons construire un « composant d’interface » de type accordéon. Cela permet d’afficher du texte en quantité dans des zones d’affichage que l’utilisateur fait apparaître en cliquant sur le titre de la zone. C’est un composant très classique (accordion) que l’on trouve dans de nombreux frameworks JavaScript.

Cet exemple est très largement inspiré de celui de ce site : https://www.paulrhayes.com/accordion-using-only-css/

2. La structure de l’accordéon

L’accordéon est inséré dans une boîte <div> identifiée. Chaque zone de l’accordéon est aussi insérée dans une boîte <div> identifiée et utilise une classe commune. Le titre de chaque zone est un en-tête h3. Le texte est inséré dans un paragraphe p utilisant une classe commune et placé dans une boîte <div>.

<div id="accordion"> 
    <div id="un" class="section"> 
        <h3><a href="#un">Commodo augue</a></h3> 
        <div> 
            <p class="texte">Commodo augue...</p> 
        </div> 
 ...