-
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 : transition, propriete, valeur, duration, function
-
Commentaires
Met ça dans le css d'un de blog de test
.menu_module_titre {margin: 10px;
text-align: center;
font-family: Impact;
color: #310d00;
text-shadow: 0px 0px 5px #ff9c00;
font-size: 25px;
letter-spacing: -1px;
-webkit-transition: color 2s, text-shadow 2s;
-moz-transition: color 2s, text-shadow 2s;
transition: color 2s, text-shadow 2s}.menu_module_titre:hover {color: #ff9c00;
text-shadow: 0px 0px 3px black;
-webkit-transition: color 2s, text-shadow 2s;
-moz-transition: color 2s, text-shadow 2s;
transition: color 2s, text-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à?
Ah oui, j'ai fait une betise, excuse moi ^^' Voilà le bon
.module_menu_titre {margin: 10px;
text-align: center;
font-family: Impact;
color: #310d00;
text-shadow: 0px 0px 5px #ff9c00;
font-size: 25px;
letter-spacing: -1px;
-webkit-transition: color 2s, text-shadow 2s;
-moz-transition: color 2s, text-shadow 2s;
transition: color 2s, text-shadow 2s}
.module_menu_titre:hover {color: #ff9c00;
text-shadow: 0px 0px 3px black;
-webkit-transition: color 2s, text-shadow 2s;
-moz-transition: color 2s, text-shadow 2s;
transition: color 2s, text-shadow 2s}
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 !
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?
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;}?
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 ;)
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:/
.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?
Naga-chan(je peux t'appele comme sa?)En fait........Sa marche aussi ailleurs que dans les textes??
Bien sur. Tu peux par exemple faire un menu coulissant comme sur le coté gauche du blog avec cette propriété ;)
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!!!
.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:/
C'est bon ! Je vient de comprendre(enfin!--')Juste , c'est quoi le code pour mettre de l'ombre lors du survol ?
J'Y SUIS ARRIVER !!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!MERCI MERCI MERCI MERCI MERCI MERCI DE M'AVOIR EXPLIQUER !!!!!!!!!!!!!!!!!!!!!!!!!!!!
Bon beh Nagalia tu as gagner des com's^^
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 ?
Regarde dans "apparence => modifier le thème => contenu => titre" et verrifie que tu n'ai pas mis de couleur
40Kitty-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 ?
42Aikya
Mercredi 30 Mai 2012 à 11:33Sa 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
J'ai essayer sa ne marche pas : j'ai mis : #menu a
{text-shadow: 2px 2px 5px black;-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}
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 ;)
Comme quelques un de mes titres? C'est avec transform ;)
=> http://fanstasy-graph.eklablog.net/transformer-des-elements-a27827603
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
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:
To the joker : essaye peut être c: : (je sais pas si ça t'aide...)
#header:hover { transition-duration: 1s ;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
background: url("http://ekladata.com/madness.ek.la/perso/headerover.png");}
#header { transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s; }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
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
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)
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 :)
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;
}
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
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;
}
Merci pour toutes tes explixations ! Grace à toi, je comprends de mieux en mieux le CSS et arrive à me corriger toute seule ! :D
Bonjour,
Je cherche à faire se dérouler le menu de façon fluide (et pas tout d'un coup)
menu a { 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 ! ;)
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
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
-
Dimanche 16 Avril 2017 à 18:53
Explication rapide de la syntaxe CSS
=> http://fanstasy-graph.eklablog.net/introduction-a4961842
Les transitions permettent de faire passer un élément d'un état A à un état B en un certain temps.
Pour ce que tu veux faire, voici quelques liens utiles :
les pseudo-éléments (appliquer un effet au survol)
=> http://fanstasy-graph.eklablog.net/pseudo-element-a23036240
Couleur du texte
=> http://fanstasy-graph.eklablog.net/couleur-du-texte-a23038640
Divers effets de texte
=> http://fanstasy-graph.eklablog.net/propriete-de-texte-a5377556
Et un exemple de code pour que tu comprennes :
a {color : red;}
a:hover{ color: blue;}a = sélecteur des liens
:hover = pseudo-element du survole
color = propriété de couleur de texte
red et blue = valeur de couleur
-
OK super, merci beaucoup ! :D
Tu fais du bon boulot sur ce blog et j'y passe beaucoup de temps, continue !! :D
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 2017 à 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);}
-
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog 
Merci♥