Tutoriel effet de transition sur les liens
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Tutoriel effet de transition sur les liens
Bonjour,
Le tutoriel présenté ici propose quelques incorrections et précisions :
https://forum.forumactif.com/t345726-ajouter-un-effet-de-transition-sur-les-liens
Le code suivant :
devrait être écrit de la sorte :
En effet, il convient de terminer par la propriété finalisée (sans préfixe).
De même, il est possible de créer un effet au survol différent de l'effet au moment où l'on quitte le lien.
Pour en savoir plus, vous trouverez des informations sur cet article :
Effet de survol en CSS3 - Imiter mouseover et mouseout
Dans la mesure du possible, essayez de toujours cibler précisément les propriétés que vous allez animer (essayer donc d'éviter "all" qui me à profit votre carte graphique).
Merci et bonne lecture.
Le tutoriel présenté ici propose quelques incorrections et précisions :
https://forum.forumactif.com/t345726-ajouter-un-effet-de-transition-sur-les-liens
Le code suivant :
- Code:
a {
transition:all 0.5s;
-moz-transition:all 0.5s; /* Mozilla Firefox */
-webkit-transition:all 0.5s; /* Safari et Google Chrome */
-o-transition:all 0.5s; /* Opera */
}
devrait être écrit de la sorte :
- Code:
a {
-webkit-transition: all 0.5s; /* Safari et Google Chrome */
-moz-transition: all 0.5s; /* Mozilla Firefox */
-o-transition: all 0.5s; /* Opera */
transition: all 0.5s;
}
En effet, il convient de terminer par la propriété finalisée (sans préfixe).
De même, il est possible de créer un effet au survol différent de l'effet au moment où l'on quitte le lien.
Pour en savoir plus, vous trouverez des informations sur cet article :
Effet de survol en CSS3 - Imiter mouseover et mouseout
Dans la mesure du possible, essayez de toujours cibler précisément les propriétés que vous allez animer (essayer donc d'éviter "all" qui me à profit votre carte graphique).
Merci et bonne lecture.
Re: Tutoriel effet de transition sur les liens
Bonjour,
J'ai changé de place le transition.
Cordialement.
J'ai changé de place le transition.
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Tutoriel effet de transition sur les liens
Bonjour !
juste une question : pour quelles raisons faut-il terminer par la propriété sans préfixe ?
juste une question : pour quelles raisons faut-il terminer par la propriété sans préfixe ?
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Tutoriel effet de transition sur les liens
La dernière propriété reconnue par le navigateur est la propriété appliquée.
Et au fil du temps, les navigateurs font fonctionner la propriété ( qui devra dans le futur être la propriété unique ) transition.
Donc en ce moment avec ce css :
=> Chrome 26 et + : utilise transition
=> Firefox [4,16[ : utilise -moz-transition
=> Firefox 16 et + : utilise transition
=> IE 10 et + : utilise transition
=> Opera [11.6,12.10[ : utilise -o-transition
=> Opera 12.10 et + : utilise transition
=> Safari 3.0 et + : utilise -webkit-transition
Alors qu'avec :
=> Firefox 4 et + : utilise -moz-transition
=> IE 10 et + : utilise transition
=> Opera 11.6 et + : utilise -o-transition
=> Safari 3.0 et + : utilise -webkit-transition
On préfère avoir transition quand il est disponible, car il est censé suivre les standards de l'internet, alors que les -[navigateur]-transition pourrait en différer ( pour tester une nouvelle fonctionnalité de la propriété par exemple ).
Dans les faits, ne pas le faire a une probabilité minime de causer un problème.
Cordialement.
Et au fil du temps, les navigateurs font fonctionner la propriété ( qui devra dans le futur être la propriété unique ) transition.
Donc en ce moment avec ce css :
- Code:
a {
-webkit-transition: all 0.5s; /* Safari et Google Chrome */
-moz-transition: all 0.5s; /* Mozilla Firefox */
-o-transition: all 0.5s; /* Opera */
transition: all 0.5s;
}
=> Chrome 26 et + : utilise transition
=> Firefox [4,16[ : utilise -moz-transition
=> Firefox 16 et + : utilise transition
=> IE 10 et + : utilise transition
=> Opera [11.6,12.10[ : utilise -o-transition
=> Opera 12.10 et + : utilise transition
=> Safari 3.0 et + : utilise -webkit-transition
Alors qu'avec :
- Code:
a {
transition:all 0.5s;
-moz-transition:all 0.5s; /* Mozilla Firefox */
-webkit-transition:all 0.5s; /* Safari et Google Chrome */
-o-transition:all 0.5s; /* Opera */
}
=> Firefox 4 et + : utilise -moz-transition
=> IE 10 et + : utilise transition
=> Opera 11.6 et + : utilise -o-transition
=> Safari 3.0 et + : utilise -webkit-transition
On préfère avoir transition quand il est disponible, car il est censé suivre les standards de l'internet, alors que les -[navigateur]-transition pourrait en différer ( pour tester une nouvelle fonctionnalité de la propriété par exemple ).
Dans les faits, ne pas le faire a une probabilité minime de causer un problème.
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Tutoriel effet de transition sur les liens
merci beaucoup pour cette réponse ! ^^
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Tutoriel effet de transition sur les liens
Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif |
Sujets similaires
» Effet de transition sur les liens
» Problème avec le code effet de transition
» Effet de transition qui décale l'icône vers le bas
» Effet de transition Cube
» Effet de transition fondue dans des onglets.
» Problème avec le code effet de transition
» Effet de transition qui décale l'icône vers le bas
» Effet de transition Cube
» Effet de transition fondue dans des onglets.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum