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.
Besoin d'un graphiste ?
Publiez votre annonce sur Graphiste.com et recevez une quinzaine de devis.
Vous êtes graphiste ? Créer un compte gratuitement
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.
pour tous vos projets graphiques
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.
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.