Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS3
  3. Les transitions CSS3
Extrait - HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition)
Extraits du livre
HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition) Revenir à la page d'achat du livre

Les transitions CSS3

L’état des lieux et l’objectif

C’est un peu le « Graal » des intégrateurs web : créer des « effets » de transition à l’aide des CSS, sans une once de JavaScript et sans faire appel à un développeur web. Eh bien les CSS3 le permettent, avec le module Transition, toujours en Working Draft au 11 octobre 2018 : https://www.w3.org/TR/css-transitions-1/

Cela va vous permettre de passer d’une valeur CSS à une autre avec une transition spécifiée si un événement est détecté au niveau d’un élément. Lorsque la transition est terminée, l’élément reprend ses paramètres CSS initiaux.

Ce module est toujours en Working Draft, mais il est parfaitement reconnu par les navigateurs modernes.

images/new-043.png

Mettre en place les transitions

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 :

Nom de la propriété

Type

background-color

color

background-image

only gradients

background-position

percentage, length

border-bottom-color

color

border-bottom-width

length

border-color

color

border-left-color

color

border-left-width

length

border-right-color

color

border-right-width

length

border-spacing

length

border-top-color

color

border-top-width

length

border-width

length

bottom

length, percentage

color

color

crop

rectangle

font-size

length, percentage

font-weight

number

grid-*

various

height

length, percentage

left

length, percentage

letter-spacing

length

line-height

number, length, percentage

margin-bottom

length

margin-left

length

margin-right

length

margin-top

length

max-height

length, percentage

max-width

length, percentage

min-height

length, percentage

min-width

length, percentage

opacity

number

outline-color

color

outline-offset

integer

outline-width

length

padding-bottom

length

padding-left

length

padding-right

length

padding-top

length

right

length, percentage

text-indent

length, percentage

text-shadow

shadow

top

length, percentage

vertical-align

keywords, length, percentage

visibility

visibility

width

length, percentage

word-spacing

length, percentage

z-index

integer

zoom

number

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

  • transition-property: none indique qu’aucune...

Effectuer une transition de déplacement

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...

Les autres propriétés des transitions

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 :

  • ease : la transition est lente au début, puis accélère vers la fin (c’est la valeur par défaut).

  • linear : la transition se fait à vitesse constante.

  • ease-in : la transition se fait lentement au début, puis accélère vers la fin.

  • ease-out : la transition se fait rapidement au début, puis ralentit vers la fin.

  • ease-in-out : la transition se fait lentement au début, puis accélère, puis ralentit vers la fin.

  • cubic-bezier : cela permet de paramétrer vous-même la courbe de Bézier pour la cinétique.

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

images/chap12-002.png

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...

Les générateurs en ligne

1. CSS3 Generator

En choisissant Transition dans la liste déroulante, CSS3 Generator (http://css3generator.com/) vous permet de travailler sur cinq propriétés (Property). Vous pouvez spécifier la durée (Duration) et la cinétique (Function).

images/C11-002N.png

2. CSS 3.0 Maker

Avec CSS 3.0 Maker (https://www.css3maker.com/css3-transition.html), le travail des transitions ne se fait que sur quelques propriétés. Vous pouvez définir l’événement (Select Action) la durée (Transition Duration) et la cinétique (Transition Timing).

images/chap12-004.png

3. Créer vos courbes de Bézier

Nous l’avons vu, la propriété transition-timing-function permet de créer ses propres courbes de Bézier avec le mot-clé cubic-bezier. Pour vous aider à créer visuellement vos courbes de Bézier, voici un site vraiment génial : http://cubic-bezier.com/

Vous avez sur la gauche un graphique Bézier dans lequel vous pouvez manipuler les deux points directeurs. La « formule » cubic-bezier se crée dynamiquement en haut de l’écran. Vous avez aussi un comparateur de cinétique et des courbes prédéfinies.

images/chap12-022.png

Exemple d’un menu interactif

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 :

  • la couleur d’arrière-plan va passer progressivement du jaune au bleu,

  • la couleur du texte va passer progressivement du noir au blanc.

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 :

images/chap12-009.png

3. Les transitions

Dans le style...

Exemple d’un diaporama interactif

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" /> 
       ...

Exemple de menu à tiroirs

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> 
 ...

Exemple d’accordéon

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> 
 ...