CSSトランジション幅センターから

親のホバリング時に、コンテナを中心から指定された幅まで開きます。問題は、左から開くことができないということです。私はそれがthis situation hereと同じように働きたいが、私はばかだから私の状況にはうまくいかない。また、可能であれば、最初のアニメーションを実行した後にコンテナのコーナーのアニメーションをアクティブにしたいと思います。CSSトランジション幅センターから

body { 
 
    background: #4e4e4e; 
 
} 
 

 
#music { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: calc(50% - 50px); 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid white; 
 
    background-color: #000; 
 
    opacity: 1; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
} 
 

 
#music:hover { 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
} 
 

 
#music img { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
#music:hover .music-container { 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    height: 23px; 
 
    width: 210px; 
 
    margin-top: 8px; 
 
    opacity: 1; 
 
    background-color: #000; 
 
    color: #000; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
} 
 

 
.music-container { 
 
    height: 23px; 
 
    width: 0px; 
 
    position: absolute; 
 
    background-color: #000; 
 
    padding-left: 10px; 
 
    border: 1px solid white; 
 
    margin-left: -85px; 
 
    margin-top: 8px; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
}

<div id="music"> 
 
    <center> 
 
    <img src="https://i.imgur.com/cgIfJId.gif" /> 
 
    </center> 
 
    <div class="music-container"> 
 
    <center> 
 
     <font color="white" size="1"> 
 
     jsfiddle can't load my music lol 
 
     </font> 
 
    </center> 
 
    </div> 
 
</div>

出典

2017-10-01 Jona

、

body { 
 
    background: #4e4e4e; 
 
} 
 

 
#music { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: calc(50% - 50px); 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid white; 
 
    background-color: #000; 
 
    opacity: 1; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
} 
 

 
#music:hover { 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
} 
 

 
#music img { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
#music:hover .music-container { 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    height: 23px; 
 
    width: 210px; 
 
    margin-top: 8px; 
 
    opacity: 1; 
 
    background-color: #000; 
 
    color: #000; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
} 
 

 
.music-container { 
 
    height: 23px; 
 
    width: 0px; 
 
    position: absolute; 
 
    background-color: #000; 
 
    padding-left: 10px; 
 
    border: 1px solid white; 
 
    margin-top: 8px; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    left: 50%; /*Add this*/ 
 
    transform: translate(-50%, 0); /*Add this*/ 
 
}

<div id="music"> 
 
    <center> 
 
    <img src="https://i.imgur.com/cgIfJId.gif" /> 
 
    </center> 
 
    <div class="music-container"> 
 
    <center> 
 
     <font color="white" size="1"> 
 
     jsfiddle can't load my music lol 
 
     </font> 
 
    </center> 
 
    </div> 
 
</div>

出典

2017-10-01 05:55:39 frnt

...中央のボックス.stripは、それが中央から「成長」inline-blockで、次のスニペットをチェック。フラッシュ埋め込み（音楽プレーヤー）が正しく機能しません。ボタンを左右にクリックしたり、そのボタンをスパムしない限り、私はフラッシュと対話できません。この問題は[ここ]（https://a.uguu.se/f6rPcVjduEUv.html）で確認できます。 – Jona

@ Jonaあなたのブラウザがそのフラッシュの実行をブロックしている可能性があります。クロムを使用している場合は、/ content/flashを設定してフラッシュを許可し、次のURLでフラッシュを許可します。 – frnt

私はFirefoxを使用していますが、これは間違いなくフラッシュをブロックするものではありません。前のコードでこれをテストしても問題ありません。しかし、このCSSアニメーションでは、前に述べた手順を実行しない限り、ボタンのどれかをクリックすることはできません。おそらく、CSSアニメーションが原因でフラッシュが正常に動作しないのでしょうか？ [自分の発行物を示すためにgifを作った]（https://i.imgur.com/f7vz5rN.gif）。 – Jona

あなたはtransform: scaleの代わりwidthを移行することを達成することができます。

body { 
 
    background: #4e4e4e; 
 
} 
 

 
#music { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: calc(50% - 50px); 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid white; 
 
    background-color: #000; 
 
    opacity: 1; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
} 
 

 
#music:hover { 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
} 
 

 
#music img { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
#music:hover .music-container { 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    height: 23px; 
 
    width: 210px; 
 
    margin-top: 8px; 
 
    opacity: 1; 
 
    background-color: #000; 
 
    color: #000; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
    transform: scale(1); 
 
} 
 

 
.music-container { 
 
    height: 23px; 
 
    width: 210px; 
 
    transform: scale(0); 
 
    position: absolute; 
 
    background-color: #000; 
 
    padding-left: 10px; 
 
    border: 1px solid white; 
 
    margin-left: -85px; 
 
    margin-top: 8px; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
}

<div id="music"> 
 
    <center> 
 
    <img src="https://i.imgur.com/cgIfJId.gif" /> 
 
    </center> 
 
    <div class="music-container"> 
 
    <center> 
 
     <font color="white" size="1"> 
 
     jsfiddle can't load my music lol 
 
     </font> 
 
    </center> 
 
    </div> 
 
</div>

出典

2017-10-01 05:54:25 felixmosh

私はセンターのIDにこのCSSを追加し、このCSSの代わりleft: calc(50% - 50px);を使用してください。また、ホバーのCSSを追加して変更してください。あなたが.music-containerのために、中心から幅を大きくする上で、ここにtransformプロパティを使用する必要が

#music { 
left:0; 
right:0; 
margin: 0 auto; 
} 
#music:hover .music-container { 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
}  
.music-container { 
    height: 23px; 
    width: 210px; 
    position: absolute; 
    background-color: #000; 
    padding-left: 10px; 
    border: 1px solid white; 
    margin-left: -85px; 
    margin-top: 8px; 
    overflow: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    left:0; 
    right:0; 
    border-radius: 10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}

body { 
 
    background: #4e4e4e; 
 
} 
 

 
#music { 
 
    position: absolute; 
 
    top: 5px; 
 
    left:0; 
 
    right:0; 
 
    margin: 0 auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid white; 
 
    background-color: #000; 
 
    opacity: 1; 
 
    -webkit-transition: all 0.8s ease; 
 
    -moz-transition: all 0.8s ease; 
 
    transition: all 0.8s ease; 
 
} 
 

 
#music:hover { 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    border-radius: 100px; 
 
} 
 

 
#music img { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-top: 10px; 
 
} 
 

 
#music:hover .music-container { 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
} 
 

 
.music-container { 
 
    height: 23px; 
 
    width: 210px; 
 
    position: absolute; 
 
    background-color: #000; 
 
    padding-left: 10px; 
 
    border: 1px solid white; 
 
    margin-left: -85px; 
 
    margin-top: 8px; 
 
    overflow: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    left:0; 
 
    right:0; 
 
    border-radius: 10px; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
}

<div id="music"> 
 
    <center> 
 
    <img src="https://i.imgur.com/cgIfJId.gif" /> 
 
    </center> 
 
    <div class="music-container"> 
 
    <center> 
 
     <font color="white" size="1"> 
 
     jsfiddle can't load my music lol 
 
     </font> 
 
    </center> 
 
    </div> 
 
</div>

出典

2017-10-01 05:54:34

これは私がそれが望むように動作しますが、一つの問題がある

.holder{ 
 
    width  : 500px; 
 
    margin  : 0px auto; 
 
    text-align : center; 
 
    font-family : arial; 
 
} 
 

 
.button{ 
 
    display  : inline-block; 
 
    padding  : 3px; 
 
    background : #333; 
 
    color   : #fff; 
 
    border-radius : 3px; 
 
    cursor  : pointer; 
 
} 
 

 
.hover:hover .strip{ 
 
    width : 100px; 
 
} 
 

 
.padd{ padding:3px; } 
 

 
.strip{ 
 
    box-sizing : border-box; 
 
    border-radius : 3px; 
 
    margin-top : 5px; 
 
    width   : 0px; 
 
    display  : inline-block; 
 
    overflow  : hidden; 
 
    white-space : nowrap; 
 
    transition : all 0.3s ease-out; 
 
    background : #333; 
 
    color   : #fff; 
 
}

<div class="holder"> 
 
    <div class="hover"> 
 
    <div class="button">Hover Me</div> 
 
    <div class="container"> 
 
    <div class="strip"> 
 
    <div class="padd">Some Text</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-10-01 06:27:27 levi

CSSトランジション幅センターから

答えて

関連する問題