Html 在引导网格中定位Css动画

我正在创建一个css动画，我想把它放到引导网格系统中。动画中的元素已设置为position:absolute，这使我的文本在动画在移动设备上出现故障时掩盖了动画。如何修复此问题，使文本在发生故障时位于动画下方

以下是我的代码链接：

---

我建议您使用

transition:translate（）

，而不是及时更改圆的绝对位置。动画的效果要平滑得多

。动画{
位置：相对位置；
}
#人{
位置：绝对位置；
顶部：15px；
左：125px；
}
#畜生{
位置：绝对位置；
顶部：100px；
左：90px；
动画名称：动物；
动画迭代次数：无限；
动画持续时间：7秒；
动画方向：交替；
}
@关键帧动物{
从{
转换：translateY（-100px）；
转换：translateX（-85px）；
}
到{
转换：translateY（-10px）；
translateX（-80px）；
}
}
#环境{
位置：绝对位置；
顶部：98px；
左：168px；
动画名称：环境；
动画迭代次数：无限；
动画持续时间：7秒；
动画方向：交替；
}
@关键帧环境{
从{
转换：translateY（-100px）；
转化：translateX（65px）；
}
到{
转换：translateY（-10px）；
translateX（80px）；
}
}

。动画{
位置：相对位置；
背景颜色：橙色；
/*因为内容是绝对定位的，所以容器的高度为0*/
最小高度：200px；
}
#人{
位置：绝对位置；
顶部：15px；
左：90px；
}
#畜生{
位置：绝对位置；
顶部：100px；
左：45像素；
动画名称：动物；
动画迭代次数：无限；
动画持续时间：3s；
动画方向：交替；
}
@关键帧动物{
从{
转换：translateY（-100px）；
转换：translateX（-35px）；
}
到{
转换：translateY（-10px）；
translateX（-80px）；
}
}
#环境{
位置：绝对位置；
顶部：98px；
左：140像素；
动画名称：环境；
动画迭代次数：无限；
动画持续时间：3s；
动画方向：交替；
}
@关键帧环境{
从{
转换：translateY（-100px）；
转化：translateX（35px）；
}
到{
转换：translateY（-20px）；
translateX（80px）；
}
}

综合办法
一种健康意识到人类、动物和环境的健康都是相互关联的

我可能来晚了一点，但我得到了一些建议

如前所述，在使用

动画

或

转换

时，应使用CSS属性

变换

。它大大提高了性能

不需要在动画中指定初始值，因为它们已经在类中声明

例如：

#animal {
   top: 100px;
   left: 45px;
   animation: animal 1s linear;
}

@keyframes animal {
   from {top: 100px; left:45px;}
   to {top: 83px; left:90px;}
}

使用以下选项具有相同的效果：

@keyframes animal {
   to {top: 83px; left:90px;}
}

---

对于SVG，您可以使用带有符号的精灵表，并使用

标记，创建SVG图标，您可以使用CSS设置样式和动画

代码段：

#spritesheet{
显示：无；
}
.动画{
文本对齐：居中；
最小高度：200px；
}
.图标{
显示：内联块；
宽度：1米；
高度：1米；
笔画宽度：0；
笔画：当前颜色；
填充：当前颜色；
}
.图标--人类，
.图标--动物，
.图标--环境{
字号：6em；
不透明度：.7；
}
.图标-人类{
颜色：#137CBD；
}
.图标-动物{
颜色：#D440B；
变换：translateY（100px）；
动画：动物7s线性无限交替；
;
}
.图标--环境{
颜色：#008A2C；
变换：translateY（100px）；
动画：环境7s线性无限交替；
}
@关键帧动物{
到{
转换：转换（60px，60px）；
}
}
@关键帧环境{
到{
转换：转换（-60px，60px）；
}
}

综合办法
一种健康意识到人类、动物和环境的健康都是相互关联的

真管用！我也同意，过渡翻译确实使动画更加流畅。如果你喜欢，请投票支持我的解决方案。我非常渴望获得代表积分：我不能投票给一个不回答问题的答案。问题是“绝对的，当我的文本在手机上出现故障时，它会掩盖动画。我如何解决这个问题，使文本在出现故障时位于动画之下？”。然而，你的答案确实让动画效果更好，这不是问题所在。尽管如此，请随意投票支持我的答案……因为它确实回答了问题。

#animal {
   top: 100px;
   left: 45px;
   animation: animal 1s linear;
}

@keyframes animal {
   from {top: 100px; left:45px;}
   to {top: 83px; left:90px;}
}

@keyframes animal {
   to {top: 83px; left:90px;}
}