Tutoriel effet de transition sur les liens

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 le Lun 11 Fév 2013 - 16:02

Bonjour,

Le tutoriel présenté ici propose quelques incorrections et précisions :
http://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
**

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 le Lun 11 Fév 2013 - 16:16

Bonjour,


J'ai changé de place le transition.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23429
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 le 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
+ Hyperactif +

Messages : 4340
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 le 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
Aidactif
Aidactif

Messages : 23429
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 le Lun 11 Fév 2013 - 20:13

merci beaucoup pour cette réponse ! ^^

MlleAlys
+ Hyperactif +

Messages : 4340
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 le Lun 18 Fév 2013 - 10:35

Bonjour,

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


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

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

http://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


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