如何使动画图像响应？答案

【问题标题】：How do I make an animation image responsive?如何使动画图像响应？
【发布时间】：2021-11-30 08:44:45
【问题描述】：

我让图像在一定范围内上下移动但是当我缩小屏幕时，图像会从原来的位置移动，我希望它是稳定的，那是怎么回事？

.image_it{
  width: 85px;
  position:fixed;
  top: 450px;
  left: 320px;
  animation: animate1 7s linear infinite;
}

@keyframes animate1 {
  0%,100% {
      transform: translateY(11px);
  }
  50% {
      transform: translateY(-11px);
  }
}

<html>
<body>
  <img src="/images/it.jpg" alt="IT" class="image_it">
</body>
</html>

【问题讨论】：

不要使用固定的像素尺寸，而是尝试使用相对尺寸 (%) 看看是否有帮助。
这些答案解决了你的问题吗？

标签： css image animation responsive

【解决方案1】：

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.image_it {
  width: 50%;
  animation: animate1 7s linear infinite;
}

@keyframes animate1 {
  0%,
  100% {
    transform: translateY(11px);
  }
  50% {
    transform: translateY(-11px);
  }
}

<html>

<body>
  <img src="https://images.unsplash.com/photo-1633917737415-3549f9a77cd5?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="IT" class="image_it">
</body>

</html>

【讨论】：