CSSスムーズ移動アニメーションが動作しない

Question

CSSアニメーションコードが機能していません。 #tools_buttonをチェックすると、#tools_hiddenが表示され、上から0％、上から6％にスムーズに移動します。

#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>

スクリプトを厳密に私のプロジェクトのために制限されています： は、ここでは、コードです。だから、スクリプトを追加することを考えないでください。

Answer 1

あなたが望む効果を得るためにopacity代わりdisplayのアニメーションを使用することができます

#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

を多分それは、displayプロパティで行うことはできません。 したがって、divの最初の位置を-6％に変更し、noneとdisplay：ブロックの両方の表示を削除しました。ここ は、新しい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%; 
     } 

HTMLコードは、まだ古いものです。