Faire fond fade out/in

Est-il une manière que je peux utiliser CSS3 à s'estomper dans et hors d'un solide blanc fond d'un <div>?
le contenu doit rester visible de sorte que le fond devrait s'estomper.

Toutes les idées à l'aide de transitions css3/transforme?

merci pour votre aide.

OriginalL'auteur cmplieger | 2011-10-01

  1. 20

    Sûr, vous pouvez utiliser le la transition de la propriété directement sur la background-color:

    div {
   background-color: white;    

   /* transition the background-color over 1s with a linear animation */
   transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
div:hover {
   background-color: transparent;      
}

    Voici un exemple d'un fond rouge fondu sur :hover.

    Ne savais pas qu'on pouvait les animer en fait la couleur d'arrière-plan. Je pense que c'est beaucoup mieux que ma solution 🙂
    Les Transitions sont assez excellente, mais je suis impatient quand on peut supprimer tous les navigateur préfixes spécifiques.
    vous pouvez utiliser LESS / SASS et utiliser le mixin. Au moins la rend supportable si vous êtes en utilisant beaucoup de propriétés CSS3.
    Je n'ai pas essayé LESS/SASS encore, mais oui, les préfixes certainement faire un bon argument pour eux.
    merci pour le jsfiddle! voici un fork de l'échantillon qui s'estompe une couleur d'arrière-plan après charge jsfiddle.net/divzero/Ddhwx

    OriginalL'auteur Pat

  2. 2

    Vous pouvez trouver cela utile pour des exemples de l'image et de la couleur de fond s'estompe: -
    http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

    Cependant, l'utilisation de CSS 3 pour faire la transition en limiter l'impact pour les navigateurs qui ne supportent pas.

    très belle approche, +1 pour une bonne orientation

    OriginalL'auteur KryptoniteDove

  3. 0

    Vous pourriez avoir deux divs dans un div conteneur. La première div contient le fond blanc, la seconde on obtient le contenu.

    Ensuite, utilisez un CSS3 transformer pour animer l'opacité de la première div à zéro.

    Merci pour la suggestion. J'ai finalement mis la première couleur inline sur la div et la deuxième couleur (ie. blanc) externe comme background-color: white !important; ainsi que la transition de la propriété.

    OriginalL'auteur Husky