Twitter bootstrap 如何使此css动画具有响应性？

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

链接：

编辑： 我曾尝试引导使图像响应，但无法使动画响应

正文{
身高：100%；
背景：径向梯度（009acc，#363795）；
背景色：#221e05；
颜色：白色；
字体系列：“乔治亚”、“图拉真专业版”、“衬线版”；
}
标题{
宽度：570px；
保证金：0自动；
透视图：500px；
}
h1{
文本对齐：居中；
边缘顶端：40px；
字体大小：52px；
线高：24px；
}
h3{
文本对齐：右对齐；
字体系列：“舞蹈脚本”、“画笔脚本标准”、“无衬线”；
字号：26px；
右侧填充：15px；
线高：10px；
颜色：#f2af1a；
}
p{
文本对齐：居中；
字体大小：14px；
}
.拼图{
宽度：800px；
高度：457px；
保证金：50px自动0；
背景图像：url（'http://dollarz.comli.com/Maze%20Puzzle.gif');
位置：相对位置；
}
.球{
位置：绝对位置；
宽度：20px；
高度：20px；
背景色：#f2af1a；
边界半径：100%；
顶部：150px；
左：45像素；
动画：运动20秒轻松3秒无限；
}
@关键帧移动{
0%{顶部：200px；左侧：45px；}
5%{顶部：273px；左侧：45px；}
10%{顶部：273px；左侧：136px；}
20%{顶部：162px；左侧：136px；}
30%{顶部：162px；左侧：360px；}
40%{顶部：105px；左侧：360px；}
50%{顶部：105px；左侧：417px；}
60%{顶部：332px；左侧：417px；}
70%{顶部：332px；左侧：473px；}
75%{顶部：220px；左侧：473px；}
80%{顶部：220px；左侧：587px；}
85%{顶部：110px；左侧：587px；}
90%{顶部：110px；左侧：645px；}
95%{顶部：257px；左侧：645px；}
100%{顶部：257px；左侧：732px；}
}

解谜
…使用CSS动画

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

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

---

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