このCSSアニメーションを反応的にするにはどうすればいいですか？

Question

私はCSS3アニメーションを使用して簡単なサイトを作成しました。応答性を高める方法はありますか？

リンク：http://dollarz.comli.com/

編集： 私は画像が応答するために、ブートストラップしようとしましたが、アニメーションが応答することができませんでした。

body { 
 
    height: 100%; 
 
    background: radial-gradient(#009acc, #363795); 
 
    background-color: #221e05; 
 
    color: white; 
 
    font-family: 'Georgia', 'trajan pro', 'serif'; 
 
} 
 
header { 
 
    width: 570px; 
 
    margin: 0 auto; 
 
    perspective: 500px; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    margin-top: 40px; 
 
    font-size: 52px; 
 
    line-height: 24px; 
 
} 
 
h3 { 
 
    text-align: right; 
 
    font-family: 'Dancing Script', 'brush script std', 'sans-serif'; 
 
    font-size: 26px; 
 
    padding-right: 15px; 
 
    line-height: 10px; 
 
    color: #f2af1a; 
 
} 
 
p { 
 
    text-align: center; 
 
    font-size: 14px; 
 
} 
 
.puzzle { 
 
    width: 800px; 
 
    height: 457px; 
 
    margin: 50px auto 0; 
 
    background-image: url('http://dollarz.comli.com/Maze%20Puzzle.gif'); 
 
    position: relative; 
 
} 
 
.ball { 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #f2af1a; 
 
    border-radius: 100%; 
 
    top: 150px; 
 
    left: 45px; 
 
    animation: movement 20s ease 3s infinite; 
 
} 
 
@keyframes movement { 
 
    0% { top: 200px; left: 45px; } 
 
    5% { top: 273px; left: 45px; } 
 
    10% { top: 273px; left: 136px; } 
 
    20% { top: 162px; left: 136px; } 
 
    30% { top: 162px; left: 360px; } 
 
    40% { top: 105px; left: 360px; } 
 
    50% { top: 105px; left: 417px; } 
 
    60% { top: 332px; left: 417px; } 
 
    70% { top: 332px; left: 473px; } 
 
    75% { top: 220px; left: 473px; } 
 
    80% { top: 220px; left: 587px; } 
 
    85% { top: 110px; left: 587px; } 
 
    90% { top: 110px; left: 645px; } 
 
    95% { top: 257px; left: 645px; } 
 
    100% { top: 257px; left: 732px; } 
 
}

<header> 
 
    <h1>Solving Maze Puzzle</h1> 
 
    <h3>..Using CSS Animation</h3> 
 
</header> 
 

 
<div class="puzzle"> 
 
    <div class="ball"></div> 
 
</div>

Answer 1

あなたはそれを、それが切断されないことを確認するための最大の幅を与える必要があります。

.puzzle { 
     width: 800px; 
     height: 457px; 
     margin: 50px auto 0; 
     background-image: url('Maze Puzzle.gif'); 
     position: relative; 
     max-width: 100%; 
     display: block; 
    }