• Transition

    /!\ Ne fonctionne qu'avec les dernière version de Google Chrome, Mozilla Firefox et Safari (autre navigateur non testé) et ne marche absolument pas avec Internet Explorer

    /!\ Ce code n'est pas à la porté des débutant en css. Il faut savoir maitriser les pseudo-classe.


    A savoir également que le CSS3 n'étant pas encore correctement implémenter (même dans les dernières versions des navigateur), il faut rajouter un petit truc devant la propriété en question :

    "-webkit" fonctionne pour google chrome et safari
    "-moz" fonctionne pour mozilla
    La dernière ligne est en prévision de quand tout les navigateur reconnaîtrons ce code (c'est pas demain la veille, mais bon)

    sélecteur { propriété: valeur;
                       -webkit-transition-propriety: propriété;
                       -moz-transition-propriety: propriété;
                       transition-propriety: propriété}

    Le "transition-propriety" indique a quelles propriétés on va appliquer l'effet entre l'état normal et celui survolé/cliqué.

    • si vous voulez que toutes les propriété soient animé, mettez "all" comme valeur 
    • si vous voulez que seules quelques propriété soient animé, mettez ne nom des propriété séparé par des virgule 
    • si vous ne voulez pas d'animation, mettez "none" comme valeur
    sélecteur { propriété: valeur;
                       -webkit-transition-duration: Xs;
                       -moz-transition-duration: Xs;
                       transition-duration: Xs;} 

    "transition-duration" indique le temps que durera la transition. Vous pouvez donner comme uniqter la seconde (ex: 2s) ou la milliseconde (ex: 30ms).
    Si vous avez préciser plusieurs propriété pour la transition, vous pouvez mettre différente durées, séparé par des virgule.

    sélecteur { propriété: valeur;
                       -webkit-transition-timing-function: valeur;
                       -moz-transition-timing-function: valeur;
                       transition-timing-function: valeur;}

    Le "transition-timing-function" Précise la fonction de transition à utiliser (accélération...) Désolé pour les allergique aux math, mais on va parler fonction X)
    Vous pouvez mettre comme valeur un des mot suivant:

    • ease : Rapide sur le début et ralenti sur la fin. 
    • linear : La vitesse est constante sur toute la durée de l'animation. 
    • ease-in : Lent sur le début et accélère de plus en plus vers la fin. 
    • ease-out : Rapide sur le début et décèlere sur la fin. 
    • ease-in-out : Le départ et la fin sont lents. 

    Pour que ça soit plus simple a comprendre, voici les courbes (emprunté à Alsacréation)

    sélecteur { propriété: valeur;
                       -webkit-transition-delay: Xs;
                       -moz-transition-delay: Xs;
                       transition-delay: Xs;} 

    Le "transition-delay" détermine le départ de la transition. La transition commence par défaut quand l'élément est déclenché (survol, clique...) mais on peu la retarder.

    Pour éviter d'encombrer votre page css, on peu raccourcir les code, en notant simplement la propriété "transition"

    sélecteur { propriété: valeur;
                       -webkit-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
                       -moz-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
                       transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";} 

    Remplacer les propriété "transition-property", "transition-duration"... par leur valeur.


    Tags Tags : , , , ,
  • Commentaires

    1
    Dimanche 6 Novembre 2011 à 11:06

    Merci♥

    2
    Dimanche 6 Novembre 2011 à 11:10

    De rien =)

    3
    Mercredi 16 Novembre 2011 à 14:26

    ... j'ai rien compris >_< ça m'aiderais si tu pouvais mettre un exemple... s'il te plaît :D

    4
    Mercredi 16 Novembre 2011 à 17:32

    Met ça dans le css d'un de blog de test

    .menu_module_titre {margin10px;
       text-aligncenter;
        font-familyImpact;
        color#310d00;
        text-shadow0px 0px 5px #ff9c00;
        font-size25px;
        letter-spacing-1px;
        -webkit-transitioncolor 2stext-shadow 2s;
        -moz-transitioncolor 2stext-shadow 2s;
        transitioncolor 2stext-shadow 2s}

    .menu_module_titre:hover {color#ff9c00;
        text-shadow0px 0px 3px black;
        -webkit-transitioncolor 2stext-shadow 2s;
        -moz-transitioncolor 2stext-shadow 2s;
        transitioncolor 2stext-shadow 2s}

    Il y a deux partie: la première est celle qui donne les info de base de l'élément, la deuxième
    lorsqu'il est survolé par la souris. Ici, il n'y a que la couleur qui change en 2seconde.

    Tu comprend là?

    5
    Mercredi 16 Novembre 2011 à 18:41

    Ouais, déjà mieux xD maintenant faut que je test

    6
    Mercredi 16 Novembre 2011 à 18:48

    ...ça marche même pas sur mon blog de test xD

    7
    Mercredi 16 Novembre 2011 à 18:55

    Ah oui, j'ai fait une betise, excuse moi ^^' Voilà le bon

    .module_menu_titre {margin10px;
       text-aligncenter;
        font-familyImpact;
        color#310d00;
        text-shadow0px 0px 5px #ff9c00;
        font-size25px;
        letter-spacing-1px;
        -webkit-transitioncolor 2stext-shadow 2s;
        -moz-transitioncolor 2stext-shadow 2s;
        transitioncolor 2stext-shadow 2s}
    .module_menu_titre:hover {color#ff9c00;
        text-shadow0px 0px 3px black;
        -webkit-transitioncolor 2stext-shadow 2s;
        -moz-transitioncolor 2stext-shadow 2s;
        transitioncolor 2stext-shadow 2s}

    8
    Mercredi 16 Novembre 2011 à 19:02

    Ah oui, ça marche 8D merci

    9
    Mercredi 16 Novembre 2011 à 19:09

    De rien =)

    Tu as compris?

    10
    Mercredi 16 Novembre 2011 à 19:30

    Oui ça marche, merci :D

    11
    Samedi 26 Novembre 2011 à 19:20

    Merci ! S'il y'a un problème , je signalerais :D

    12
    Samedi 17 Décembre 2011 à 12:56

    Trop fassile :3

    13
    Samedi 7 Janvier 2012 à 17:30

    Merci du partage ♥

    14
    Lundi 20 Février 2012 à 19:55

    Pas du tout compris--'Comment tu fait pour modifier la couleurs ?

    Enfaite , je voudrait au survole , que sa face un dégradée vert (comme toi quoi )et que sur les titre des rubriques et des articles , tu aurais le code ?Parce que je suis vraiment pas forte en CCS--'Quelques trucs comme le menu déroulent et le clic droit c'est toutxDSinon bravo pour ce magnfique blog !

    15
    Lundi 20 Février 2012 à 21:04

    Bin mets au survol la balise de temps? Si j'ai bien compris :o

    16
    Lundi 20 Février 2012 à 21:06
    17
    Lundi 20 Février 2012 à 21:27

    Je réexplique ;)

    Voici les sélécteur pour le titre des rubrique et des articles:

    .module_menu_titre {propriété: valeur;}
    .module_titre {propriété: valeur;}

    Ensuite, pour pouvoir appliquer une transition, il faut définir 2 état: Normal et survolé

    .module_menu_titre {propriété: valeur;}
    .module_menu_titre:hover {propriété: valeur;}

    .module_titre {propriété: valeur;}
    .module_titre:hover {propriété: valeur;}

    Si tu veux appliquer une transition sur la couleur, il faut déjà indiquer 2 couleur: la couleur du titre normal, et la couleur du titre survolé (ici vert et noir)

    .module_menu_titre {color: green;}
    .module_menu_titre:hover {color: black;}

    .module_titre {color: green;}
    .module_titre:hover {color:black;}

    On peu maintenant mettre la transition:

    .module_menu_titre {color: green;
                                     
    -webkit-transition: color 1s;
                                     -moz-transition:  color 1s ;
                                     transition:  color 1s ;}
    .module_menu_titre:hover {color: black;}

    .module_titre {color: green;
                           -webkit-transition: color 1s;
                           -moz-transition:  color 1s ;
                           transition:  color 1s ;}
    .module_titre:hover {color:black;}

    Voilà ^^ Tu as compris?

    18
    Lundi 20 Février 2012 à 21:30

    Donc , le code serer :

    .module_menu_titre {color: green;}
    .module_menu_titre:hover {color: black;}

    .module_titre {color: green;}
    .module_titre:hover {color:black;}

    On peu maintenant mettre la transition:

    .module_menu_titre {color: green;
                                     
    -webkit-transition: color 1s;
                                     -moz-transition:  color 1s ;
                                     transition:  color 1s ;}
    .module_menu_titre:hover {color: black;}

    .module_titre {color: green;
                           -webkit-transition: color 1s;
                           -moz-transition:  color 1s ;
                           transition:  color 1s ;}
    .module_titre:hover {color:black;} 

    ?

    19
    Lundi 20 Février 2012 à 21:42

    Non, juste ça

    .module_menu_titre {color: green;

                                     -webkit-transition: color 1s;

                                     -moz-transition:  color 1s ;

                                     transition:  color 1s ;}

    .module_menu_titre:hover {color: black;}

    .module_titre {color: green;

                           -webkit-transition: color 1s;

                           -moz-transition:  color 1s ;

                           transition:  color 1s ;}

    .module_titre:hover {color:black;} 

    Mais le but, c'est que tu comprenne ce que tu fais quand même ;)

    20
    Lundi 20 Février 2012 à 21:44

    oui merci^^je ferer sa demain , ilest 22h et hier j'ai fait nuit blanche :3

    21
    Lundi 20 Février 2012 à 21:46

    D'acc

    Bonne nuit alors =)

    22
    Mardi 21 Février 2012 à 09:44

    Je comprend vraiment pas la :/

    Est-ce que tu pourrais dire ce qu'il faut modifier ? (exemple : .selecteur ...etc)en gardant les mots (ex : selcteur , color , etc..) Comme sa on aurais que a modifier parce que là je suis un peu perdu , tu expliqe bien , mais j'ai pas réussi a comprendre ce qu'il faut modifier:/

    23
    Mardi 21 Février 2012 à 10:10

    .module_menu_titre {color: green;  /*Couleur du texte*/
                     -webkit-transition: color 1s;  /*transition pour Chrome et Safari*/
                     -moz-transition:  color 1s ;  /*transition pour Firefox*/
                     transition:  color 1s ;  /*transition pour futur navigateur*/
    }  

    .module_menu_titre:hover {color: black; /Couleur du texte au survol*/
    }

    .module_titre {color: green;
                 -webkit-transition: color 1s;
                 -moz-transition:  color 1s ;
                  transition:  color 1s ;}

    .module_titre:hover {color:black;

    En Bleu, se sont les sélecteur (celui du titre des menu, et du titre des articles)
    En Gris, c'est le pseudo-class :hover qui permet de mettre une autre apparence au survol
    En Vert, se sont les propriété (la couleur du texte, et la transition)
    En Rouge, ce sont les valeurs que tu peux modifier en fonction de ton thème. J'ai mis comme couleur du texte green et black au survol, que tu peux modifier. Si tu trouve la transition trop lente ou trop rapide, tu peux modifier le 1s par 0.5s par exemple. 

    C'est un peu plus clair comme ça?

    24
    Mardi 21 Février 2012 à 10:13

    Ha oui beaucoup plus ! Merci mille fois ! 

    Désolée pour le dérengement

    25
    Mardi 21 Février 2012 à 17:43

    De rien =)

    26
    Mercredi 22 Février 2012 à 12:26

    Naga-chan(je peux t'appele comme sa?)En fait........Sa marche aussi ailleurs que dans les textes??

    27
    Mercredi 22 Février 2012 à 18:31

    Bien sur. Tu peux par exemple faire un menu coulissant comme sur le coté gauche du blog avec cette propriété ;)

    28
    Mercredi 22 Février 2012 à 19:20

    Nagalia : Je suis toujours perdu :/!!!

    Tu pourrais me le faire quand tu auras le temps ?

    Heu donc , comme toi , pour les titre des rubrique , et article

    Mercii!!!

    29
    Mercredi 22 Février 2012 à 19:44

    Qu'est ce que tu ne comprends pas?

    (Je reprends le code de Nagalia)

     

    .module_titre {color: green;
                 -webkit-transition: color 1s;
                 -moz-transition:  color 1s ;
                  transition:  color 1s }

    .module_titre:hover {color: black;} 

     

    En rose ce sont les Sélecteurs.
    En rouge c'est :hover, une "propriétée" que l'on rajoute pour dire au survol. Si l'on ne mets pas :hover rien de changera quand on passera le curseur sur comme sur l'exemple là, le menu.
    En bleu la propriétée. Là ce sont les transitions (Tuto en haut) et la couleur du texte.
    En Mauve clair ce sont valeurs. Remplace par les tiennes.

      __________________________________________________________________________________________

    Voilà tu n'as qu'à remplacer ce que je vais te donner par tes valeurs à toi, comme la couleur ou le temps.


    .module_titre {color: TA COULEUR;}

    .module_titre:hover {color: TON AUTRE COULEUR;

      -webkit-transition-duration: Xs;

                       -moz-transition-duration: Xs;

                       transition-duration: Xs;} 


    .module_menu_titre {color: TA COULEUR;}

    .module_menu_titre:hover {color: TON AUTRE COULEUR;

      -webkit-transition-duration: Xs;

                       -moz-transition-duration: Xs;

                       transition-duration: Xs;} 


    En rouge la couleur des titres non-survolés.
    En bleu la couleur des titres survolés.
    En vert le temps que ça va prendre pour totalement changer. 


    Après met dans ton CSS le code changer. (Colle le code sur un bloc-note pour te repérer)BVB

    Good Luck ;)

     

    30
    Mercredi 22 Février 2012 à 19:47

    Ho merci merci merci merci merci merci merci merci merci merci merci merci !!!!!!!!!!!!!!!!

    31
    Mercredi 22 Février 2012 à 19:50

    Si ça ne marche pas, dis le.

    32
    Mercredi 22 Février 2012 à 19:54

    .module_titre {color: black;}

    .module_titre:hover {color: green;

      -webkit-transition-duration: 3s;

                       -moz-transition-duration: 3s;

                       transition-duration: 3s;} 


    .module_menu_titre {color: green;}

    .module_menu_titre:hover {color: black;

      -webkit-transition-duration: 3s;

                       -moz-transition-duration: 3s;

                       transition-duration: 3s;} 

    Il y'a une erreur ou pas ? Parce que sa marche pas:/

    33
    Mercredi 22 Février 2012 à 19:58

    C'est normalement bon mais essais de retirer les propriétées déjà mises sur les titres

    Par exemple quand je veux changer la police de texte des titres (J'ai mis une police manuscrite) j'ai du mal, car j'avais déjà mis (Sans le CSS) une police de texte. Donc ça ne marchait pas. Retire les polices de textes.

    34
    Mercredi 22 Février 2012 à 20:00
    35
    Mercredi 22 Février 2012 à 20:00

    C'est normalement bon mais essais de retirer les propriétées déjà mises sur les titres

    Par exemple quand je veux changer la police de texte des titres (J'ai mis une police manuscrite) j'ai du mal, car j'avais déjà mis (Sans le CSS) une police de texte. Donc ça ne marchait pas. Retire les polices de textes.

     

    J'ai essayé sur mon blog d'essai, j'ai retiré les couleur de texte des titres, et hop ! Ca marche

    36
    Mercredi 22 Février 2012 à 20:03

    Quand tu auras le temps , tu pourra me le faire ??

    Je t'es mit une perm sur mon blog test

    37
    Mercredi 22 Février 2012 à 20:03

    Quand tu fais Apparence --> Modifier le thème et que tu modifies la couleur des titres (Contenu --> Titres) et bien les propriétées de CSS que tu auras mise ne marcheront pas tant donné que ils y en aura déjà! Retire les couleurs.

    38
    Mercredi 22 Février 2012 à 20:04

    J'ai le temps là.

    39
    Mercredi 22 Février 2012 à 20:06

    Merci merci mille fois ! donc eu comme bagalia ,je doi y aller ciao !

    40
    Jeudi 23 Février 2012 à 09:48

    C'est bon ! Je vient de comprendre(enfin!--')Juste , c'est quoi le code pour mettre de l'ombre lors du survol ?

    41
    Jeudi 23 Février 2012 à 10:39

    J'Y SUIS ARRIVER !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    MERCI MERCI MERCI MERCI MERCI MERCI DE M'AVOIR EXPLIQUER !!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Bon beh Nagalia tu as gagner des com's^^

    42
    Jeudi 23 Février 2012 à 10:49

    De rien =)

    Et merci mimille ^^ 

    43
    Samedi 17 Mars 2012 à 21:35

    Ok , mais qand je fait un nouvel article , le titre est violet (normalement noir) et de l'ombre bleu ( normal)

    Comment faire pour qu'il n'y'ai paxs le violet ?

    44
    Dimanche 18 Mars 2012 à 10:06

    Regarde dans "apparence => modifier le thème => contenu => titre" et verrifie que tu n'ai pas mis de couleur

    45
    Dimanche 18 Mars 2012 à 10:23

    Non , il n'ya pas de couleur

    46
    Dimanche 18 Mars 2012 à 10:32

    De quel couleur sont tes liens?

    47
    Dimanche 18 Mars 2012 à 12:22
    48
    Kitty-Girly Profil de Kitty-Girly
    Dimanche 13 Mai 2012 à 12:13

    Moi je suis perdu de chez perdu ! Pour le module des visiteurs ou l'opacité change doucement quel code il faut utiliser ?

    49
    Dimanche 13 Mai 2012 à 14:20

    OMG j'ai réussi !!!

    merci merci merci pour ce tuto !!

    50
    Aikya Profil de Aikya
    Mercredi 30 Mai 2012 à 11:33

    Youpiiiie, j'ai enfin réussi, merci pour ce tuto >w<

    51
    Mercredi 30 Mai 2012 à 17:49

    De rien :)

    52
    Mercredi 30 Mai 2012 à 17:53

    bon, je l'ai enlevée de mon blog, mais ton tuto est génial :D

    53
    Mardi 24 Juillet 2012 à 15:43

    Sa a peut-etre rien a voir avec l'article mais j'aimerai savoir comment fairepour que la ou y a écrit FAQ Livre d'Or Blabla et défis mette du temps a désendre

    54
    Mardi 24 Juillet 2012 à 16:50

    Nekoo: Si, c'est cette article :D

    55
    Mardi 24 Juillet 2012 à 19:24

    Il faut appliquer la transition au menu de l'en tête du blog ;)

    56
    Mercredi 25 Juillet 2012 à 10:51

    J'ai essayer sa ne marche pas : j'ai mis : #menu a

    {text-shadow2px 2px 5px black;-webkit-transition-duration2s;
                       -moz-transition-duration2s;
                       transition-duration2s;}

    57
    Mercredi 25 Juillet 2012 à 10:52

    Coucou Nagi :) Sa va ?

    Je ne sais pas si tu as remarquer, mais sur certains blog, quand tu survol un lien, le texte "s'élargi" avec la transition...Et donc c'était pour te demander si tu connaissais la propriété (qui permet d'élargir, au survol de la souri, le texte) ?

    Merci ;)

    58
    Mercredi 25 Juillet 2012 à 18:27

    Comme quelques un de mes titres? C'est avec transform ;)
    => http://fanstasy-graph.eklablog.net/transformer-des-elements-a27827603 

    59
    Mercredi 25 Juillet 2012 à 19:26

    Merci, mais ton lien ne marche pas ^^'

    61
    Mercredi 25 Juillet 2012 à 21:47

    Oui c'est bon, je vais voir^^

    62
    Lundi 5 Novembre 2012 à 15:18

    Bonjour, j'ai un forum et je voulais utilisé ton code CSS pour les transition, j'ai beau faire n'importe quoi rien ne marche :S

    63
    Vendredi 11 Janvier 2013 à 23:56

    Bonsoir Nagalia.. Je comprends pas bien pourquoi mon code

    #header:hover{
                       -webkit-transition-duration: 1s;
                       -moz-transition-duration: 1s;
                       transition-duration: 1s;
    background:url("http://ekladata.com/madness.ek.la/perso/headerover.png");}
    #header {
                        -webkit-transition-duration: 1s;
                        -moz-transition-duration: 1s;
                        transition-duration: 1s}

     

    Ne fonctionne pas êe ..
    Si tu pouvais m'aider.. Merci et bonne soirée o:

    64
    Samedi 26 Janvier 2013 à 11:30

    To the joker : essaye peut être c: : (je sais pas si ça t'aide...)

     #header:hover { transition-duration1s ;

                            -webkit-transition-duration1s;

     

                            -moz-transition-duration1s;

                           backgroundurl("http://ekladata.com/madness.ek.la/perso/headerover.png");}
    #header { transition-duration1s;
                        -webkit-transition-duration1s;
                        -moz-transition-duration1s; }

     

    To Nagalia : J'avais une question ... Pour le navigueur Google Chrome, y'aurait pas une petite ligne de code ? Voili voilou merci d'avance. :3

    65
    Jeudi 28 Février 2013 à 21:06

    super merci pour ces codes

    66
    Mardi 4 Mars 2014 à 13:10

    j'ai mis pleins de code mais sa ne fait rien sur mon blog 

    67
    Mardi 4 Mars 2014 à 13:22

    excuser moi mais je suis pomé royalement je ne comprend plus rien a vos code et tous donc je pense que je vais vous expliquer se que je veux vraiment donc je veux 

    un que a chaque fois que l'on passe sur l'avatar d'un des visiteur les image qui étais flou ne le soit plus et qu'il tourne 

    deux j'aimerais que quand on passe sur un de mes lien l'image s’agrandisse 

    trois changer la forme de mes module vous voyer qu'il soit un peu comme les tien arrondis au bout et tous sa en restant dans le thème le bleu 

    merci de me filer directement les code tout en sachant que le java est enlever sur mon blog 

    de vous remercie beaucoup d'avance 

    68
    Mardi 4 Mars 2014 à 19:04

    Ce blog n'a pas pour but de "filer directement les codes" mais d'apprendre à utiliser tous ces langages ;)
    Je te conseille en premier lieu de lire CET ARTICLE si tu débutes.

    1- => http://fanstasy-graph.eklablog.net/pivoter-les-avatars-derniers-visiteurs-topic95634
    Si tu as d'autre questions par rapport à ce code, demande à la suite du sujet dans le forum ;)

    2 - Tu parles de tous les liens (auquel cas tu veux agrandir le texte et/ou l'image) ou uniquement des liens liés à une image ?

    3- => http://fanstasy-graph.eklablog.net/coins-arrondis-a5446494
    Le sélecteur à utiliser pour les menus est #menu1 ou #menu1, #menu2 (si tu as les deux modules)

    69
    Samedi 17 Mai 2014 à 11:49

    Bonjour Nagalia,

    Merci beaucoup pour ce tuto, encore une fois très bien expliqué, mais il y a tout de même un point sur lequel je bloque : j'aimerais appliquer une transition seulement aux liens de mon menu. Voici le code que j'ai pour l'instant :

    a {propriété:all;
        -transition-duration:0.5s;
        -moz-transition-duration:0.5s;
        -webkit-transition-duration:0.5s;}

    Je sais qu'il faut que je remplace "all" par quelque chose, et le problème c'est que je ne sais pas quoi... Bref, merci d'avance si tu peux m'aider :)

    70
    Samedi 17 Mai 2014 à 13:12

    L'élément auquel tu veux appliquer un effet se définit dans le sélecteur.

    Dans ton code, ton sélecteur est a, donc tous les liens de la page. Il faut que tu écrives #menu1 a pour indiquer que tu cible les liens dans le menu.

    propriété : all; n'existe pas ;)

    #menu1 a { transition-duration:0.5s;
          -moz-transition-duration:0.5s;
          -webkit-transition-duration:0.5s;
    }

    71
    Samedi 17 Mai 2014 à 13:51

    Super, merci beaucoup !

    72
    Vendredi 6 Juin 2014 à 13:15

    Bonjour Nagalia.

    Merci pour ta réponse si rapide et pour l'aide que tu apportes à chacune de mes embûches hihi.

    1 - J'aimerais que les liens de TOUT mon blog fasse une jolie transition.

    2 - De plus, j'aimerais que les cadre rose qui se forme lorsque je passe sur le menu de mon header fasse une transition.

    J'ai essayé d'appliquer ce code :

    #menu a:hover {
        -moz-transition: opacity 0.5s linear 0s;
        -webkit-transition: opacity 0.5s linear 0s;
        transition: opacity 0.5s linear 0s;
        opacity: 1;
     }

    Pour faire l'effet 2 que j'aimerais, mais ça ne marche pas.

    Est-ce que je me suis trompée xD ?

    Merci Nagalia pour ton aide <3

    73
    Jeudi 3 Juillet 2014 à 12:08

    j'ai moi utiliser :

    #module_menu_contenuXXX ul{
        transition: 2s;
    -moz-transition:  2s; /* Firefox 4 */
    -webkit-transition: 2s; /* Safari and Chrome */
    -o-transition:  2s; /* Opera */
       opacity: 0;
         height:0px;
        width:100%;
        }
    #module_menu_contenuXXX ul:hover {
      opacity: 1;
        height:200px;
    }

    74
    Samedi 27 Décembre 2014 à 15:16

    Merci pour toutes tes explixations ! Grace à toi, je comprends de mieux en mieux le CSS et arrive à me corriger toute seule ! :D

    75
    Mardi 12 Mai 2015 à 19:52

    Bonjour, 

    Je cherche à faire se dérouler le menu de façon fluide (et pas tout d'un coup) 

     

    menu propriétévaleur;
                       -webkit-transition"transition-property" "1s" "ease-out";
                       -moz-transition"transition-property" "1s" "ease-out";

                       transition"transition-property" "1s" "ease-out";

    menu a:hover propriétévaleur;

                       -webkit-transition"transition-property" "1s" "ease-out";
                       -moz-transition"transition-property" "1s" "ease-out";
                       transition"transition-property" "1s" "ease-out";

     

    Sauf que je ne sais pas quelle propriété mettre, ni si mon code est bon... Donc je voudrais savoir à quelle propriété mon histoire correspond ! ;) 

     

    76
    Mardi 12 Juillet 2016 à 07:38

    Merci bien pour ce tuto. Je tombe dessus par hasard et ça devient impressionnant ce que permet le CSS. J'ai sentiment d'avoir raté un wagon. Il faudra qu'à l'occasion je m'en serve pour autre chose que changer les couleurs de police he

    77
    Vendredi 14 Avril à 18:13

    C'est quoi une "propriété" et une "valeur" ... ?? T^T

    Dans ce code là :

    sélecteur { propriété: valeur;
                       -webkit-transition-propriety: propriété;
                       -moz-transition-propriety: propriété;
                       transition-propriety: propriété}

    En fait j'aimerai bien que lorsque ma souris passe sur un liens, la couleur change et que les lettres du liens s'écartent et j'essaie de trouver un code mais je trouve pas ! T-T

    78
    Lundi 17 Avril à 11:27

    OK super, merci beaucoup ! :D

    Tu fais du bon boulot sur ce blog et j'y passe beaucoup de temps, continue !! :D

    79
    Jeudi 20 Juillet à 19:14

    En faite j'aimerais savoir comment faire une transition entre deux image pour mon header par se que sans transition sa fait ba un super rendu

    Image:http://www.renders-graphiques.fr/image/upload/normal/feathers_1.png

    Image au survol :http://www.renders-graphiques.fr/image/upload/normal/Shinigami_no_Testament.png

      • Vendredi 21 Juillet à 00:52

        L'état d'un élément survolé est indiqué par :hover

        #header{     background: url(IMG1);     transition: 300ms; /*durée de la transition*/}#header:hover{     background: url(IMG2);}

    80
    Vendredi 21 Juillet à 09:57

    Merci beaucoup pour ton aide sa marche ^^ 

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :