HTML & CSS Inspiration

Inspiration : 15 transitions CSS pour les pages de votre site

Transitions de page CSS
Publié par Charlotte Chollat

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

 

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.

1 Commentaire

  • Vraiment très créatif. Merci pour ces bonnes idées.
    J’avais tendance à “mépriser” les transitions, par rapport aux animations mais je vois que c’était une erreur.

Laissez un commentaire