私の@keyframesイメージは私のdivの外で成長していますか？

Question

@keyframesを使用している私の画像は、私のdiv = "image-zoom"を超えてスケ​​ールされます。それは正しくズームされますが、div内でズームすると外側に移動し、水平スライダーが増加します。

HTML：

<section id="intro-section"> 
    <div id="image-zoom"> 
     <h1>WELCOME</h1> 
    </div> <!-- /.container --> 
</section> 

CSS：

#intro-section { 
    height: 400px; 
    width: 100%; 
} 

#image-zoom { 
    background-image: url(/img/fairy-bg.jpg); 
    background-size:100%; 
    position:relative; 
    top:237; 
    left:0; 
    width:100%; 
    height:400px; 
    animation: zoom 30s infinite; 
    padding: 0; 
} 

@keyframes zoom { 
    0% { transform:scale(1,1); } 
    50% { transform:scale(1.2,1.2); } 
    100% { transform:scale(1,1); } 
} 

私はそれは簡単です知っているが、間違いがある場合、私は見ることができません。

Answer 1

問題がどこにあるかです：

transform:scale(1.2,1.2) 

スケールは、コンテナのサイズを超えています。 （1 =容器の大きさ）

Answer 2

を含むものに<div>