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

I have an animated gif, which I want to animate slowly and smoothly around. The gif needs to stay with the parent div. Which reactJS libraries would you suggest using for this task? As I guess it cannot be done only using css :-(

Cheer, and merry Christmas

CodePudding user response：

You may want to take a look at tutorials like this one: 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 >
  <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="codepen" />
</div>