comment rendre lisse transition css

comment puis-je obtenir une transition css exemple comme dans ici (la liste déroulante exemple), jusqu'à présent, j'ai réussi à modifier uniquement le texte et la couleur d'arrière-plan, mais pas l'ensemble de l'effet de transition chose (d'où le rectangle rouleaux lors de son survol et restaure en douceur lorsque l'onu a plané), une idée de comment puis-je l'atteindre? voici mon code:

a.menulink
{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1;
}

a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}

je vous remercie avant

InformationsquelleAutor Abie Giordano | 2013-08-13
  1. 3

    Voir cette Démo

    <a href="#" class="linkhover">
    <span hover-title="LINK HOVER">LINK HOVER</span>
</a>

.linkhover {
    display: inline-block;
    overflow: hidden;
    perspective: 400px;
    -webkit-perspective: 400px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
}
.linkhover span {
    display: block;
    position: relative;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
    transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
    -webkit-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
}
.linkhover span:after {
    content: attr(hover-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: white;
    background: red;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}
    • bien, merci! 🙂
    • À tout moment..mais lire cette pour une meilleure compréhension des css perspective en 3d animatioin avec css.. css-tricks.com/almanac/properties/p/perspective
    • désolé de vous déranger à nouveau, mais il ne semble pas compatible avec chrome, une suggestion?
    • Je l'ai vérifié dans google chrome mac v28 et sa fonctionne bien.. vérifiez à nouveau ici jsfiddle.net/52uta/1
    • comme je l'ai vérifié maintenant, il ne fonctionne pas sur IE, aucune solution de contournement pour elle? merci 🙂
    • si je devais ajouter comme { -ms-webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );} pour IE fonctionne correctement?

    InformationsquelleAutor Vikas Ghodke
  2. 1

    Il suffit d'utiliser cette. Pas besoin d'utiliser un passage en ":hover" sélecteur.

    a.menulink{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1s;
}

a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);}
    InformationsquelleAutor AHJeebon