Les animations CSS sont très prisées pour ajouter du dynamisme à un site internet : que ce soit sur les call-to-action, les loaders ou encore sur le texte.
Aujourd’hui je vous propose de découvrir une sélection de transitions de page, toutes réalisées en CSS afin que vous puissiez facilement les intégrer à votre web design.
Page Transition Loader
Un loader circulaire couplé à une transition de page, voilà ce que propose cette animation CSS.
L’effet nous donne l’impression d’être face à une horloge.
See the Pen Page Transition Loader by Arsen Zbidniakov (@ARS) on CodePen.
Page Transition with Loader
Voilà une deuxième animation CSS qui utilise le loader dans sa transition de page. L’effet est toutefois inversé par rapport au précédent puisque le loader apparaît en second.
L’animation pourra très bien se prêter sur un site de musique.
See the Pen Page Transition with Loader by John Heiner (@johnheiner) on CodePen.
Page transition CSS3 – Effet volet
L’effet de volet est un classique mais il saura s’adapter sur tout type de site web. Cette transition de page utilise le CSS et un peu de jQuery.
See the Pen Page transition CSS3 by TOMAZKI (@Podgro) on CodePen.
GSAP Cubic bezier page transition
GSAP est une bibliothèque qui permet des animations ultra-rapides. Cet exemple l’utilise pour créer un effet de transition «glisser vers le haut», ainsi que des animations d’arrière-plan animées.
See the Pen GSAP Cubic bezier page transition by Maciej Siwanowicz (@Polenji86) on CodePen.
A Collection of Page Transitions
Cette collection d’animations CSS propose des transitions de page, toutes de type slide. Seule leur direction change ce qui vous permet de varier les effets au sein de votre site.
See the Pen A Collection of Page Transitions by Cohesion (@cohesion) on CodePen.
Responsive bodymovin modal / page transition
Avec un effet «splash» cette transition de page attirera certainement l’attention de l’utilisateur. L’animation CSS se veut rapide, colorée et amusante.
See the Pen Responsive bodymovin modal / page transition by Jonas Sandstedt (@sandstedt) on CodePen.
Tiles Page Transition
Cette animation CSS vous propose une transition en plusieurs bandes successives. L’effet peut ajouter un peu de mystère à votre web design en laissant apparaître la future page petit à petit.
See the Pen Tiles Page Transition (CSS) by Milan Ricoul (@mitori) on CodePen.
Vue2 page transitions with GSAP
Les transitions ont ici été réalisées avec l’aide du framework Vue.js. Outre des transitions de base en fondu ou avec le zoom, on retrouve des animations plus travaillées telles que flipX, flipY ou encore slideUp.
See the Pen Vue2 page transitions with GSAP by Rubber Ducky (@iamrubberducky) on CodePen.
Pure CSS Page Transitions
Cette animation CSS propose trois types de transitions de page, ces dernières devenant des cartes qui se superposent ou s’intervertissent.
See the Pen Pure CSS Page Transitions by ganesh (@akshgods) on CodePen.
Page Transitions – Effet télévision
Cette transition CSS fait beaucoup penser à une ancienne télé qui s’éteint grâce au background qui ne devient qu’une fine ligne avant de disparaître. Cette animation est donc parfaite pour donner un look vintage à votre site.
See the Pen Page Transitions by Mergim Ujkani (@MergimUjkani) on CodePen.
Canvas Glitch Intro
On retrouve l’effet de glitch jusque dans les transitions de page CSS. Vous pourrez l’ajouter à votre site pour donner un style de science-fiction et plonger vos visiteurs dans une véritable expérience numérique.
See the Pen Canvas Glitch Intro by nclud team (@nclud) on CodePen.
Thumbnail to fullscreen page transition
Cette animation CSS combinée avec du Angular.js propose une transition toute en douceur entre une image “thumbnail” et une page en plein écran. Cet effet trouvera parfaitement sa place si vous souhaitez mettre en avant vos visuels.
See the Pen Thumbnail to fullscreen page transition by Steve Gardner (@ste-vg) on CodePen.
3D Cube Page Transition
De la 3D dans des vidéos, dans des affiches, et pourquoi pas dans les transitions entre les pages de votre site ? Cette animation CSS transforme votre web design en plusieurs faces d’un cube.
See the Pen 3D Cube Page Transition by Hubert Warzycha (@Hiteh) on CodePen.
Simple Page Transition
Une transition CSS simple mais pourtant très efficace. L’effet de volet partant de la droite est assez doux, apportant ainsi du dynamisme sans pour autant déranger les internautes.
See the Pen Simple Page Transition by ktsn (@ktsn) on CodePen.
Circular Page Transition
Cette transition CSS circulaire paraît lente à première vue, mais vous pourrez accélérer l’animation en modifiant sa durée.
See the Pen Untitled by David Condrey (@dcondrey) on CodePen.
Notre astuce pour créer des transitions en CSS
Pour créer des transitions en CSS, inspirez-vous de ces exemples et adaptez-les au design de votre site internet.
Pour aller plus loin et mettre en place des transitions complètement personnalisées, faites appel à un webdesigner professionnel en déposant un projet sur Graphiste.com !
C’est gratuit et vous recevrez rapidement des dizaines de devis de freelances disponibles pour réaliser votre projet.
