Vous pouvez créer, modifier et supprimer des transitions CSS3 à l’aide du panneau Transitions CSS.

Pour créer une transition CSS3, créez une classe de transition en donnant des valeurs aux propriétés de transition de l’élément. Si vous sélectionnez un élément avant de créer une classe de transition, la classe de transition est automatiquement appliquée à l’élément sélectionné.

Vous pouvez ajouter le code CSS généré au document actuel ou spécifier un fichier CSS externe.

Créez et appliquez un effet de transition CSS3

  1. (Facultatif) Sélectionnez un élément (paragraphe, en-tête, et ainsi de suite) à laquelle vous souhaitez appliquer la transition. Vous pouvez également créer une transition et l’appliquer ultérieurement à un élément.

  2. Choisissez Fenêtre > Transitions CSS.

  3. Cliquez sur .

  4. Créez une classe de transition à l’aide des options de la boîte de dialogue Nouvelle transition.

    Règle cible

    Donnez un nom au sélecteur. Il peut s’agir d’un sélecteur CSS comme une balise, une règle, un ID ou un sélecteur composite. Par exemple, si vous souhaitez ajouter des effets de transition à toutes les balises <hr>, entrez hr

    Transition sur

    Sélectionnez l’état auquel vous voulez appliquer la transition. Par exemple, si vous voulez appliquer la transition lorsque le pointeur de la souris est placé au-dessus de l’élément, utilisez l’option survol.

    Utiliser la même transition pour toutes les propriétés

    Activez cette option si vous voulez spécifier une durée, un délai et un minutage identiques pour toutes les propriétés CSS auxquelles vous voulez faire subir la transition.

    Utiliser une transition différente pour chaque propriété

    Activez cette option si vous voulez spécifier une durée, un délai et un minutage différents pour chaque propriété CSS à laquelle vous voulez faire subir la transition.

    Propriété

    Cliquez sur  pour ajouter une propriété CSS à laquelle faire subir une transition.

    Durée

    Entrez une durée en secondes (s) ou en millisecondes (ms) pour l’effet de transition.

    Délai

    Le temps, en secondes ou les millisecondes, qui doit s’écouer avant le début de l’effet de transition.

    Minutage

    Sélectionnez un style de transition parmi les options disponibles.

    Valeur de fin

    Valeur de fin de l’effet de transition. Par exemple, si vous souhaitez que la taille de police augmente de 40 px à la fin de l’effet de transition, spécifiez 40 px pour la propriété taille de police.

    Choisissez où créer la transition

    Pour incorporer le style dans le document actif, choisissez Seulement ce document.

    Si vous souhaitez créer une feuille de style externe pour le code CSS3, sélectionnez Nouveau fichier de feuille de style. Lorsque vous cliquez sur Créer la transition, vous êtes invité à indiquer l’emplacement d’enregistrement du nouveau fichier CSS. Lorsque la feuille de style a été créée, elle est ajoutée au menu Choisissez où créer la transition.

Modification des effets de transition CSS3

  1. Dans le panneau Transitions CSS, sélectionnez l’effet de transition que vous voulez modifier.

  2. Cliquez sur  .

  3. Utilisez la boîte de dialogue Modifier la transition pour modifier les valeurs précédemment entrées pour la transition.

Désactivation de la forme courte CSS pour les transitions

  1. Choisissez Édition > Préférences.

  2. Sélectionnez Styles CSS.

  3. Dans Utiliser Forme courte pour, désélectionnez Transition.


Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne