web-dev-qa-db-fra.com

Fondu en fondu en sortie d'image en utilisant CSS3?

Je me demandais s'il était possible d'énoncer une classe non flottante sur une image?

Ce que j'essaie de réaliser, c'est quand quelqu'un survole une image, elle apparaît en fondu, puis quand elle la découvre, elle disparaît.

Voici mon code, j'ai obtenu le fondu au travail lorsque quelqu'un survole une image, mais j'en ai aussi besoin de fondu quand ils découvrent ... j'espère que cela a du sens.

http://jsfiddle.net/L7XCD/

cssjsfiddle
12
user1506962

Cela devrait fonctionner pour vous! http://jsfiddle.net/L7XCD/1/

Utilisons la grande documentation de mozilla pour expliquer ceci:

Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Nous avons également utilisé les fonctions de synchronisation de transition (facilité, linéaire, entrée facile, sortie facile, entrée facile)

Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier

[~ # ~] balisage ccs [~ # ~] :

img {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
img:hover {
    opacity: 1.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

Puisqu'il utilisait la transition easy-in-out, j'ai pensé qu'il valait mieux utiliser la même fonction de transition.

Pour plus d'informations, consultez la documentation ici

J'espère que ça aide!

34
Luis

http://jsfiddle.net/L7XCD/2/ Ajoutez simplement l'effet de transition à votre élément sans le hover-tag

4
Chris