CSS 3：中央からボタンを表示

Question

私は2つのボタンがあります。最初のボタンをクリックすると消えて2番目のボタンが現れます。 2番目のボタンが中央から表示されるようにします。私はそれを広げる/中央から自己を見せなければならないということです。

You can check here the Open button for the output I want

.sending_btn{ 
 
    outline: none; 
 
    width: 128px; 
 
    height: 30px; 
 
    animation: createBox .25s; 
 

 
} 
 
@keyframes createBox { 
 
    from { 
 
    transform: scale(0); 
 
    } 
 
    to { 
 
    transform: scale(1); 
 
    } 
 
}

 <button type="button" name="button" class="sending_btn b bg-white-only">Sending...</button>

代わりのスケーリング、私はそれが中央から成長したいです。

助けがあれば助かります。

ありがとうございます。

Answer 1

をボタンのHTMLコードを囲みます。

scaleを削除して、widthを使用してください。ちょうどwidth animatation

.center { 
 
    text-align:center; 
 
} 
 
.sending_btn{ 
 
    outline: none; 
 
    width: 128px; 
 
    height: 30px; 
 
    animation: createBox 1s; 
 
    transform-origin:center center; 
 
} 
 
@keyframes createBox { 
 
    from { 
 
    width: 0; 
 
    font-size:0px; 
 
    } 
 
    to { 
 
    width: 128px; 
 
    font-size:14px; 
 
    } 
 
}

<div class="center"> 
 
    <button type="button" name="button" class="sending_btn b bg-white-only">Sending...</button> 
 
</div>

Answer 2

あなたのボタンがdivの内側にラップやCSSのセンターを割り当てるに取得することができますタグで

<center><button type="button" name="button" class="sending_btn b bg-white-only">Sending...</button></center> 

Answer 3

function togglefun() { 
 
    document.getElementById("btn1").style.display = 'none'; 
 
    document.getElementById("btn2").style.display = 'block'; 
 
    document.getElementById('btn2').className = 'bg-white-only'; 
 

 

 
}

.sending_btn { 
 
    outline: none; 
 
} 
 

 
.bg-white-only { 
 
    animation: createBox .25s; 
 
} 
 

 
.b2 { 
 
    display: none; 
 
} 
 

 
@keyframes createBox { 
 
    from { 
 
    transform: scale(0); 
 
    } 
 
    to { 
 
    transform: scale(1); 
 
    } 
 
}

<button type="button" name="button" id="btn1" class="sending_btn b1 bg-white-only" onclick="togglefun()">Sending...</button> 
 
<button type="button" name="button" id="btn2" class="sending_btn b2">second...</button>