在 div 内随机设置 object/image 动画的最佳方法？

Question

我有一个 gif 动画，我想缓慢而流畅地围绕它制作动画。 gif 需要与父 div 保持一致。您建议使用哪些 reactJS 库来完成这项任务？正如我猜想它不能只使用 CSS.

Answer 1

您可能想看看这样的教程： https://css-tricks.com/bounce-element-around-viewport-in-css/

body {
  margin: 0;
}

img, div {
  width: 100px;
  height: 100px;
}

.x {
  animation: x 2.6s linear infinite alternate;
}

.y {
  animation: y 0.8s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX( calc(100vw - 100px) );
  }
}

@keyframes y {
  100% {
    transform: translateY( calc(100vh - 100px) );
  }
}

<div class="x">
  <img class="y" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="codepen" />
</div>

在 div 内随机设置 object/image 动画的最佳方法？

Best way to animate object/image randomly around within a div?

animation

reactjs