如何使这个css动画响应？

Question

我使用CSS3动画创建了一个简单的网站。有没有办法让它响应？

链接：http://dollarz.comli.com/

编辑： 我已尝试使用bootstrap来使图像响应，但无法使动画响应。

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;
    }