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>
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>
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>
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 ;)
Vous ne pouvez pas animer la propriété display
. Vous pouvez essayer avec visibility: hidden
à visibility: visible
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;
}
}
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.