Nous allons aujourd’hui voir une méthode de transitions en CSS expérimentale, basée sur les masques CSS.

Visible sur ces demos, ces transitions sont du plus bel effet. Elles utilisent la méthode des masques, méthode CSS expérimentale, puisqu’elle n’est supportée que partiellement par les navigateurs principaux :

Ces transitions sont intéressantes car utilisent le système de masques, à la manière de Photoshop. Vous pourrez donc entièrement personnaliser le masque pour un effet au top !

Pour commencer, il vous faudra créer l’image masque au format PNG avec transparence à l’aide d’After Effects et Photoshop. Construisez ensuite votre HTML et CSS en suivant le tutoriel et vous êtes prêt !