• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

Gérer différentes transitions CSS sur un élément

Grâce aux transitions CSS 3 on voit de plus en plus d’effets de survol ou au clic. Généralement on utilise les mêmes effets quand on survol et quand on quitte un élément, ou quand l’élément apparait/disparait. Mais dans certains cas on souhaite avoir un effet d’apparition mais qu’un effet de disparition soit instantané. Par exemple un menu qui apparaît quand on scroll doit disparaître sans jouer son animation quand on remonte dans la page. Il existe une façon très simple de coder ce genre d’effet, en utilisant la surcharge des règles CSS. La règle de transition est appliquée quand une classe ou autre condition (hover, active…) est ajoutée. Quand la règle est retirée c’est la règle par défaut qui s’applique.

#menu {
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 10;

    top: -50px;
    transition: top 0s ease;
}

#menu.sticky {
    transition: top 0.6s ease;
    top: 0;
}

Avec le code précédant, quand on ajoute la classe « sticky » pour afficher le menu il y aura une animation de 0.6s, et quand la classe sera retirée l’animation durera 0s. En combinant différentes règles de transition on peut complètement changer un effet on/off, la seule limite devient l’imagination!

29/08/2014 7 MIN READ BY: Jonathan VALLET 0 COMMENT
SHARE
LIRE LA SUITE

Jonathan VALLET

Passionné de jeux vidéos, j'ai d'abord suivi un cursus de développeur avant de me spécialiser avec une année de Game Design. Après 2 ans et demi chez Ubisoft sur le développement de leur premier MMO par navigateur, puis quelques autres expériences, j'ai rejoint AdFab en 2013. Je m'occupe désormais du développement d'applis mobile et de sites généralement très graphiques.

Apprendre le Javascript en s’amusant

Répéter une tâche, ou automatiser?

VOUS POURRIEZ AIMER

Frontend Tribute to WordArt

Frontend Quelques outils d’images responsive

Frontend Animations web: Optimiser le FPS de son CSS

Frontend Media Queries Level 4, l’évolution continue

Frontend BootFlat : UI Flat pour Bootstrap – BootFlat : UI Flat for Bootstrap

Frontend Code me, I’m Famo.us, 1/3

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect