CSSで自動サイズ変更ボタン

Question

私は自動診断のための "ステップマニュアル"を持っていますが、（おそらく）CSSによる自動サイズ変更ボタンで少し問題があります。私は最初のシーケンスをクリック行くとき

：あなたが熱を持っていますか - >はい - >あなたは咳を持っていない - >

次の医者に行く私は、「リセット」と第二の配列を行うクリック：ヨーヨーはありますか発熱 - >はい - >咳がありますか？ここでボタンは初めてです。

私はコードを間違えていますか？

/*buttons*/ 
#msform .action-button { 
width: 100px; 
background: #27AE60; 
font-weight: bold; 
color: white; 
border: 0 none; 
border-radius: 1px; 
cursor: pointer; 
padding: 10px 5px; 
    margin: 10px 5px; 
} 
#msform .action-button:hover, #msform .action-button:focus { 
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; 
} 

JSFiddle

Screens

Answer 1

ボタン、全体としての容器は、あなたのjavascriptのコードで元のサイズの0.8にあるため、スケーリングの下に縮小しています。

あなたのJSからこの行を削除します。

current_fs.css({'transform': 'scale('+scale+')'}); 

更新フィドル：http://jsfiddle.net/nashcheez/bj8pd5op/31/

Answer 2

scale = 1 - (1 - now) * 0.2; 

をこれはあなたの全体のフィールドセットが0.8にまで縮小させます。 スケーリング効果のために追加した可能性があります。

2種類の溶液：

• 行を削除（@nashcheezで述べたように）、またはあなたはまだ戻ってスケールを復元するために、CSSアニメーションを使用して、スケール効果を希望する場合は1

• にスケールを設定それは元のサイズです（別名1）

  @keyframe scaleAwayToGlory { 
      0% { 
       transform: scale(0.8); 
      } 
      100% { 
       transform: scale(1); 
      } 
  }