web-dev-qa-db-fra.com

CSS n'affiche rien et l'animation d'opacité avec les images clés ne fonctionne pas

J'ai un morceau de HTML très basique avec l'objectif d'animer de display: none; à display: block avec l'opacité passant de 0 à 1. 

J'utilise le navigateur Chrome, qui utilise les préfixes -webkit comme préférence et a créé un ensemble de transition -webkit-keyframes pour rendre l'animation possible. Cependant, cela ne fonctionne pas et change simplement la display sans atténuation.

J'ai un JSFiddle ici .

<html>
    <head>
        <style type="text/css">
            #myDiv
                {
                display: none;
                opacity: 0;
                padding: 5px;
                color: #600;
                background-color: #CEC;
                -webkit-transition: 350ms display-none-transition;
                }

            #parent:hover>#myDiv
                {
                opacity: 1;
                display: block;
                }

            #parent
                {
                background-color: #000;
                color: #FFF;
                width: 500px;
                height: 500px;
                padding: 5px;
                }

            @-webkit-keyframes display-none-transition
                {
                0% {
                    display: none; 
                    opacity: 0;
                    }

                1% 
                    {
                    display: block; 
                    opacity: 0;
                    }

                100% 
                    {
                    display: block; 
                    opacity: 1;
                    }
                }
        </style>
        <body>
            <div id="parent">
                Hover on me...
                <div id="myDiv">
                    Hello!
                </div>
            </div>
        </body>
    </head>
</html>
htmlcss3animation
9
user3476093

Si vous utilisez @keyframes, vous devez utiliser -webkit-animation au lieu de -webkit-transition. Voici la doc pour @keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations .

Voir l'extrait de code ci-dessous:

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  display: none;
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
}
.parent:hover .myDiv {
  display: block;
  opacity: 1;
  /* "both" tells the browser to use the above opacity
  at the end of the animation (best practice) */
  -webkit-animation: display-none-transition 1s both;
  animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
@keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

RÉPONSE MISE À JOUR 2016

Pour refléter les meilleures pratiques actuelles, j'utiliserais une transition plutôt qu'une animation. Voici le code mis à jour:

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.parent:hover .myDiv {
  opacity: 1;
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

15
Pipo

La display ne fonctionne pas avec une transition ou une animation CSS.

Utilisez opacity, visibility ou z-index. Vous pouvez les combiner tous.

Essayez d’utiliser visibility: visible à la place display: block et visibility: hidden à la place display: none.

Et enfin, combinez z-index: -1 et z-index: 100 par exemple.

Bon travail ;)

25
Cezar Luiz

Vous ne pouvez pas animer la propriété display. Vous pouvez essayer avec visibility: hidden à visibility: visible

7
Salmen Bejaoui

Utilisez simplement position: fixed et déposez le z-index: -5 à la fin de l'animation @keyframe (vous pouvez créer n'importe quel index négatif ....

CSS: 

@keyframes fadeOut {
  0% { opacity: 1

  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100%{
    opacity: 0;
    display:none;
    position: fixed;
    z-index: -5;
  }
}
1
Zlerp

Vous pouvez utiliser Javascript pour modifier les propriétés d'affichage et l'animation. Vous ne pouvez pas afficher dans @keyframes. 

Commencez avec l'élément display:none. Ensuite, ajoutez simultanément les classes display:block et animation:*.

Voici un exemple de travail avec animation in/out.

0
sweeds