このCSSアニメーション（変換：スケール）が間違った場所で開始されるのはなぜですか？

Question

私はこのサンプルコードhttp://codepen.io/anon/pen/yaZopZ（下記の関連スニペット）を持っています。ボタンをクリックすると、モーダル要素は画面の中央で開き、何も表示されずにフルサイズになるようにアニメートされます。ただし、アニメーションの開始時に右下に開き、画面の中央で終了します。期待どおりに動作させるには、そのコードに変更する必要がありますか？

イメージをクリックすると、http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_imageのアニメーションと同様に動作するはずです。しかし、その例とは異なり、私の例では、背景をクリックしてその機能を保持する必要があるときにモーダルを閉じます。

これはアニメーション

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

と一部であり、これは問題はここではない場合は、コードの残りの部分は、私が投稿codepenである

.modal { 
    display: block; 
    width: 600px; 
    max-width: 100%; 
    height: 400px; 
    max-height: 100%; 
    position: fixed; 
    z-index: 100; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background: white; 
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9); 
    animation: animatezoom 0.3s; 
} 

をアニメ化されているものです上記（http://codepen.io/anon/pen/yaZopZ）。

Answer 1

あなたは何をすべきか、scaleにtranslateからモーダルのtransformプロパティを変更していることは一緒に両方を使用することですので、それはです：DEMO

@keyframes animatezoom { 
    from { 
    transform: translate(-50%, -50%) scale(0) 
    } 
    to { 
    transform: translate(-50%, -50%) scale(1) 
    } 
}