如何使这个 css 动画响应？答案

【问题标题】：How to make a this css animation responsive?如何使这个 css 动画响应？
【发布时间】：2026-01-31 23:40:01
【问题描述】：

我使用 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>

【问题讨论】：

一般来说，您应该发布您的实际 html 和 css，而不是可能随时更改并变得无关紧要的链接。
到目前为止您尝试过什么？你遇到过什么问题？请分享minimal reproducible example。
@Shaggy 我尝试应用引导程序“img-responsive”类来使图像响应，但找不到使动画响应的方法。
@RachelS 添加了 html 和 css 代码。

标签： twitter-bootstrap css animation responsive

【解决方案1】：

你需要给它一个最大宽度以确保它不会被切断。

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

【讨论】：