L'animation de déplacement en douceur CSS ne fonctionne pas

Question

Le code d'animation css ne fonctionne pas. Quand #tools_button est coché, je veux #tools_hidden devenir visible et passer du début: 0% au top: 6% en douceur. Voici le code:

#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 0; 
 
    display: none; 
 
    -webkit-transition: width 2s; 
 
    /* For Safari 3.1 to 6.0 */ 
 
    transition: top 0.5s; 
 
} 
 

 
#tools_button:checked~#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 6%; 
 
    display: block; 
 
}

<div id="tools"> 
 
    <span> 
 
\t \t \t \t <input type="checkbox" id="tools_button"> 
 
\t \t \t \t \t <label for="tools_button"> 
 
\t \t \t \t \t \t <img src="img/tools.png" id="tools_icon" alt=""> 
 
\t \t \t \t \t \t \t <span id="tools_label"> 
 
\t \t \t \t \t \t \t Tools 
 
\t \t \t \t \t \t </span> 
 
    </label> 
 
    <span id="tools_hidden"> 
 
\t \t \t \t \t this is hidden 
 
\t \t \t \t </span> 
 
    </span> 
 
</div>

Les scripts sont strictement limités pour mon projet. Alors, ne pensez pas à l'ajout de scripts.

Answer 1

Vous pouvez utiliser l'animation opacity au lieu de display pour obtenir l'effet souhaité:

#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 0; 
 
    opacity: 0; 
 
    -webkit-transition: width 2s; 
 
    /* For Safari 3.1 to 6.0 */ 
 
    transition: top 0.5s; 
 
} 
 

 
#tools_button:checked~#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 6%; 
 
    opacity: 1; 
 
}

<div id="tools"> 
 
    <span> 
 
      <input type="checkbox" id="tools_button"> 
 
       <label for="tools_button"> 
 
        <img src="img/tools.png" id="tools_icon" alt=""> 
 
         <span id="tools_label"> 
 
         Tools 
 
        </span> 
 
    </label> 
 
    <span id="tools_hidden"> 
 
       this is hidden 
 
      </span> 
 
    </span> 
 
</div>

Answer 2

Peut-être que ce n'est pas possible de faire avec la propriété d'affichage. Donc, j'ai changé la première position de div à -6% et j'ai enlevé les deux display: none et display: block. Voici le nouveau code css:

#tools 
     { 
     height:6vh; 
     background-color:#747474; 
     font-size:5em; 
     } 
#tools_icon 
     { 
     height:90%; 
     width:5vh; 
     } 
#tools_hidden 
     { 
       height:6vh; 
     background-color:#747474; 
     font-size:1em; 
     position:fixed; 
     left:10%; 
     top:-6%; 
     -webkit-transition: top 2s; /* For Safari 3.1 to 6.0 */ 
     transition: top 0.5s; 
     } 
#tools_button:checked ~ #tools_hidden{ 
     position:fixed; 
     left:10%; 
     top:7%; 
     } 

Le code HTML est toujours l'ancien.