• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/25/19

Créez des animations simples avec les transitions

Log in or subscribe for free to enjoy all this course has to offer!

Commencez les choses sérieuses : les transitions

Maintenant que je vous ai convaincu du large potentiel des animations CSS, il est temps de commencer les choses sérieuses !

Il existe deux moyens de créer des animations en CSS : les transitions, et les keyframes.

Je vous disais que les keyframes sont à mon sens la technique la plus fun pour les animations. C'est en fait parce qu'elles permettent d'aboutir à des animations plus élaborées... Mais elles sont aussi plus complexes à mettre en place.

Les transitions, quant à elles, sont plus limitées, mais particulièrement simples à créer. Elles permettent à un élément de passer d'un état A à un état B. Elles sont parfaites pour une animation simple, comme le changement d'un bouton au survol de la souris.

Donc n'attendons plus, lançons-nous dans nos premières transitions !

Pour créer une transition, vous aurez besoin de plusieurs informations :

  • une propriété CSS à modifier ;

  • une valeur initiale pour votre propriété CSS ;

  • une valeur finale pour cette même propriété ;

  • une durée ;

  • un événement pour déclencher votre transition.

Imaginons que vous vouliez agrandir un bouton de 15 % en une seconde.

Un bouton

Comme je vous le disais, la première information nécessaire pour une transition est une propriété CSS à modifier. Puisqu'ici nous voulons que le bouton grossisse quand un utilisateur passe sa souris dessus, nous pouvons choisir la propriété  transform  et sa fonction  scale().

Vous n'êtes pas encore familier avec la propriété  transform  et ses nombreuses fonctions ? Surtout, pas de panique. Nous les verrons en détail dans les chapitres suivants ! Pour le moment, sachez juste que  la fonction  scale()  permet de modifier la taille d’un élément, selon la valeur qu’on lui donne, sachant que 0 = 0 % et 1 = 100 %.

Ici, nous allons utiliser du Sass.

Sass a créé un nouveau langage à partir du CSS : le SCSS. Tout ce qui est valide en CSS l'est aussi en SCSS, mais il y ajoute des expressions, des fonctions, des variables, une logique conditionnelle et des boucles. Il utilise ensuite un préprocesseur (un programme qui fonctionne sur votre ordinateur ou sur un serveur) chargé de traduire cette nouvelle syntaxe intelligente en CSS.

Jetons un œil au code HTML que nous avons utilisé pour créer notre bouton :

<body>
    <div class="container">
        <div class="btn">
            Vois comme je grandis !
        </div>
    </div>
</body>

Ce bouton est constitué d’une div à laquelle est appliquée la classe  .btn, complétée du texte du bouton. Si on regarde le Sass, on peut voir qu’on a utilisé la classe  .btn  pour définir la couleur du bouton, sa marge et ses dimensions :

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
}

Nous avons donc nos informations : nous avons choisi la propriété   transform, que nous allons faire passer d'une valeur de 1.0 (100 %),  à une échelle de 1.15 (115 %) quand la souris passe sur le bouton, en une seconde.

Passez d’un état A à un état B

Ajoutons maintenant le  transform  et sa fonction   scale()  à notre classe  .btn  :

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
    border-radius: 10rem;
    transform: scale(1);
}

Étant donné que le bouton était déjà à l’échelle par défaut de 1,  notre nouvelle propriété n'a pas changé grand-chose.

Une animation CSS avec un bouton qui ne grandit pas au passage de la souris

Eh oui, il nous faut la valeur finale !

Nous voulons que le bouton grossisse de 15 % au survol de la souris. Pour cela, nous avons besoin de la pseudoclasse  :hover, avec la fonction   scale()  définie sur 1.15.

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
    border-radius: 10rem;
    transform: scale(1);
    &:hover {
        transform: scale(1.15);
    }
}

Les transitions doivent être déclenchées par un changement d’état, généralement par des pseudoclasses comme ici avec le   :hover.  Maintenant, quand nous testons notre bouton, nous pouvons voir notre point de départ et notre destination, mais il n’y a pas d’animation. Le bouton passe brusquement d'une taille à l'autre. 🙈

Une animation CSS sans transition d'un bouton qui grossit mais qui manque de fluidité

Pour ajouter un peu de fluidité, nous devons indiquer à notre navigateur que le changement d’échelle, entre l’état inactif et le  :hover, devra se faire par une transition animée. Pour cela, vous pouvez ajouter la propriété  transition-property  au sélecteur  .btn. On lui indique que la propriété  transform est celle sur laquelle le navigateur doit appliquer une transition :

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
    border-radius: 10rem;
    transform: scale(1);
    transition-property: transform;
    &:hover {
        transform: scale(1.15);
    }
}

Yaaaay nous avons ajouté une transition ! Voyons ce que ça donne :

Animation CSS d'une transition qui grossit mais qui n'est toujours pas fluide

Loupé 😤.

Mais pourquoi ???

Nous avons ajouté  transition-property, mais rien ne se passe ! Vous vous souvenez, je vous ai dit qu'il fallait 5 informations pour une transition. Or, ici, nous n'avons pas indiqué la durée à notre navigateur. Il applique donc la durée par défaut... soit 0 seconde. Ce qui ne nous avance pas vraiment.

Si votre transition ne se déclenche pas, regardez où vous avez placé vos propriétés de transition. Elles doivent être dans le sélecteur qui contient le point de départ de l’élément. Il arrive souvent de les placer par erreur dans le sélecteur contenant la valeur de fin, comme par exemple le sélecteur  :hover.

Modulez la durée de votre transition

La propriété  transition-duration  vous permet d'indiquer la durée que prendra votre transition.

transition-duration: 1s;

En CSS, on peut exprimer une durée de plusieurs manières. En secondes, comme nous venons de le faire, en indiquant le nombre de secondes suivi de la lettre “s” ; mais aussi en millisecondes, 1 000 millisecondes faisant 1 seconde, suivies par les lettres “ms” :

transition-duration: 1000ms;

Les deux méthodes permettent d'obtenir le même résultat, c’est donc surtout une question de préférence. Ici, utilisons les millisecondes pour ajouter une durée de 1 000 millisecondes à notre sélecteur  .btn.

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
    border-radius: 10rem;
    transform: scale(1);
    transition-property: transform;
    transition-duration: 1000ms;
    &:hover {
        transform: scale(1.15);
    }
}

Animation d'un bouton qui grandit de manière fluide mais trop lentement

Parfait !
On obtient bien l'effet de grossissement. Mais… ça paraît un peu long, non ? 🤔Il faut garder à l'esprit que les animations doivent être suffisamment courtes pour ne pas perturber l'utilisateur dans son expérience. Ici, on survole le bouton avec la souris, et il faut attendre la fin de la transition pour interagir : c'est définitivement trop long. On peut réduire la durée de   transition-duration à quelque chose comme 400 ms pour voir ce que ça donne.

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
    border-radius: 10rem;
    transform: scale(1);
    transition-property: transform;
    transition-duration: 400ms;
    &:hover {
        transform: scale(1.15);
    }
}

Voyons voir…

Parfait ! Le bouton grossit de 15 % sur une durée de 400 millisecondes.

Une animation CSS d'un bouton qui grossit rapidement

👏Bravo👏

Vous venez de construire votre première animation CSS !

Maîtrisez les propriétés raccourcies

Est-ce que vous vous souvenez de ce qu'on a dit précédemment ?

Pour déclarer une transition, vous pouvez ajouter la propriété   transition-property  au sélecteur  .btn

Il s'agit bien de “vous pouvez”, et non pas “vous devez”. Car il y a d’autres moyens de déclarer une transition.

transition-property: transform;
transition-duration: 400ms;

La propriété  transition  vous permet de combiner toutes les propriétés en une. Elle commence par le nom de la propriété, un espace, puis la durée.

transition: transform 400ms;

Les deux syntaxes produisent les mêmes résultats. Mais il est bien plus courant de définir les transitions par la propriété raccourcie  transition, c’est donc ce que nous allons faire à partir de maintenant.

Refactorons donc le style de   .btn  en utilisant la propriété raccourcie transition.

$cd-btn: #011c37;
$cd-txt: #15DEA5;
.btn {
    background: $cd-btn;
    color: $cd-txt;
    font-size: 3rem;
    cursor: pointer;
    padding: 1.85rem 3rem;
    border-radius: 10rem;
    transform: scale(1);
    transition: transform 400ms;
    &:hover {
        transform: scale(1.15);
    }
}

Nous avons simplifié le code, et notre bouton chéri fonctionne toujours parfaitement :

Une animation CSS d'un bouton qui grandit de façon fluide et dont le code a été refactoré

Ouf ! Cela fonctionne !

Et vous, vous avez réussi à refactorer avec la propriété raccourcie transition ?

C'est peut-être même l'occasion de manipuler quelques propriétés et de vous amuser avec le code du bouton. Je vous ai créé un CodePen pour que puissiez voir le code. 👩‍💻

Essayez de changer la couleur du bouton et sa police par exemple 😋 

En résumé :

  • les 5 éléments nécessaires pour créer une transition sont :

    • une propriété CSS à modifier,

    • une valeur initiale pour votre propriété CSS,

    • une valeur finale pour cette même propriété,

    • une durée,

    • une pseudoclasse pour déclencher l’animation ;

  • on applique la valeur initiale à l’élément qu’on veut modifier, et la valeur finale dans la pseudoclasse qui déclenche la transition ;

  • la durée peut s’exprimer en secondes : .4s, ou en millisecondes : 400ms ;

  • les propriétés d’une transition peuvent être déclarées individuellement : transition-duration: 400ms  ;

  • ou bien combinées en une seule propriété comme : transition: transform 400ms .

Ici, nous avons utilisé la pseudoclasse :hover pour déclencher notre transition. Mais il existe de nombreuses autres pseudoclasses ! Je suis sûre que vous avez hâte d'en savoir plus. Pour ça, allez voir la suite du cours ! 🚀

Example of certificate of achievement
Example of certificate of achievement