(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.
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 choisir d'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
Sélectionnez Fenêtre > Transitions CSS.
Cliquez sur
.
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
Dans le panneau Transitions CSS, sélectionnez l'effet de transition que vous voulez modifier.
Cliquez sur
.
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
Voir ce qu’une propriété raccourcie de CSS ? Pour obtenir des d’informations sur la sténographie CSS et ses avantages.
Choisissez Édition > Préférences.
Sélectionnez Styles CSS.
Dans Utiliser Forme courte pour, désélectionnez Transition.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.