Tutoriel effet de transition sur les liens

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tutoriel effet de transition sur les liens

Message par Riku Asakura Lun 11 Fév 2013 - 16:02

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 :

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.
Riku Asakura

Riku Asakura
**

Masculin
Messages : 97
Inscrit(e) le : 04/01/2007

http://never-utopia.com
Riku Asakura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel effet de transition sur les liens

Message par Ea Lun 11 Fév 2013 - 16:16

Bonjour,


J'ai changé de place le transition.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel effet de transition sur les liens

Message par MlleAlys Lun 11 Fév 2013 - 18:15

Bonjour !
juste une question : pour quelles raisons faut-il terminer par la propriété sans préfixe ?
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Tutoriel effet de transition sur les liens

Message par Ea Lun 11 Fév 2013 - 20:07

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 :

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 [1,26[ : utilise -webkit-transition
=> 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 */
}
=> Chrome 1 et + : utilise -webkit-transition
=> 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

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel effet de transition sur les liens

Message par MlleAlys Lun 11 Fév 2013 - 20:13

merci beaucoup pour cette réponse ! ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel effet de transition sur les liens

Message par Chacha Lun 18 Fév 2013 - 10:35

Tutoriel effet de transition sur les liens Check10Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur Tutoriel effet de transition sur les liens Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Tutoriel effet de transition sur les liens 50378

A bientôt sur ForumActif Smile
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum