Transition CSS ease-out ne fonctionne pas

Ok, donc je ne comprends pas pourquoi ce n'est pas la facilité, uniquement en: (pour quick view, il suffit de le coller dans http://htmledit.squarefree.com, par exemple)

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>

OriginalL'auteur Elixan | 2013-01-23

  1. 21

    Je ne suis pas sûr exactement ce que vous demandez, mais je pense que vous dites que la transition se produit uniquement sur un survol de la souris, et non au moment de la souris (il vient de s'enclenche à nouveau à la façon dont elle était avant, au lieu de transition). Vous devez ajouter votre propriété transition à #in, plutôt que de #in:hover. La transition se produit uniquement lorsque votre #in élément est survolé. Déplacer le css pour la transition en vertu de #in et il va travailler sur le dessus de la souris et de la souris. Vous voulez laisser votre css voulu pour le décollage de l'état en vertu de #in:hover, dans ce cas, l'opacité de changement, mais la transition d'une propriété css ira dans #in.

    Pour le rendre un peu plus clair:

    #in {
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
    height:150px;
    width:150px;
    transition: opacity .3s ease-in-out; /* add this here */
}

#in:hover {
    opacity:0;
    /* and we've removed it from here */
}

    La chose à savoir est que la facilité en a rien à faire avec quand il sera de la transition. Il peut sembler de cette façon, que la facilité est sur le vol stationnaire, et la facilité est sur mouseout, mais en fait, ease-in-out qui signifie qu'il sera facilité et lentement, plutôt que quelque chose comme la simplicité, ce qui facilite dans la période de transition lentement, puis accélère vers la fin. Il concerne le style de la transition elle-même, plutôt que quand il va se produire.

    Peut-être vous l'avez déjà compris, mais en fonction de votre question, il semble que vous ont été confondus.

    Juste pour clarifier, pour les autres, vous quittez le opacity: 0; dans le #in:hover et déplacer la transition vers la #in.
    Correct. J'ai mis à jour ma réponse.
    belle, trouvé ceci dans 15 secondes grâce à google et problème résolu après 25 secondes
    De Los Santos Heureux d'entendre ça!

    OriginalL'auteur welbornio

  2. 1

    J'ai trouvé @welbornio 's réponse a fonctionné pour moi, cependant ease-in-out ne fonctionne pas parfaitement au premier abord. Lorsqu'il est appliqué à l' 'img' la facilité d'effet que travaillé par intermittence. J'ai trouvé que, pour que l'effet fonctionne à chaque fois, j'ai eu à appliquer la facilité pour la 'img' et la facilité à l 'hover'. Je ne suis pas sûr de savoir pourquoi ce qui se passait, mais c'est une solution si quelqu'un s'exécute dans le même problème.

    OriginalL'auteur William Perkins