How to render a random trajectory animation infinitely, on some interval? - reactjs

Question

What I would like is to create a code that 'shoots' out some image from the center of the screen to some random trajectory.
Here is the descriptional code I would like to achieve:
class Name extends React.Component{
render(){
return (
<img animation moving from centre to some random trajectory>
after few seconds...
<another img animation (the same one) moving from centre to some other random trajectory>
<do it many more times, until event occurs that will stop it>
);
}
}
I have made components that create interface, and that render an image animation of movement from centre to some random trajectory, but only once. I don't know how to make it repeatedly.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import "./bootstrap/css/bootstrap.css";
import {CreateEnvironment} from './components/createEnvironment';
import {SheepsStart} from './components/sheepsStart';
class MainComponent extends React.Component {
render(){
return (
<React.Fragment>
<CreateEnvironment />
<SheepsStart />
</React.Fragment>
);
}
}
ReactDOM.render(<MainComponent/>, document.getElementById('root'));
Component CreateEnvironment is irrelevant, it creates 3 drawing divs.
Component SheepsStart:
import React from 'react';
import {CreateSheeps} from './createSheeps';
import sheep from '../images/sheep.png';
export class SheepsStart extends React.Component {
render(){
return (
<React.Fragment>
<CreateSheeps src = {sheep} alt = "Sheep"/>
</React.Fragment>
);
}
}
Styled component, which I needed so I could insert random #keyframes:
import styled from 'styled-components';
import { sheepWantsToEscape } from './KeyFrames';
export const CreateSheeps = styled.img`
width:2.5%;
z-index: 1;
position:absolute;
left:48.75%;
bottom:48.75%;
animation: ${sheepWantsToEscape} 4s;
animation-iteration-count:1;
animation-timing-function:linear;
`
export default CreateSheeps;
Component with #keyframes with random trajectory coordinates.Function createTrajectory calculates coordinates, and returns an array of two.
import styled, { keyframes } from 'styled-components';
import {createTrajectory} from './helperFunction';
let coordinates = createTrajectory();
export const sheepWantsToEscape = keyframes`
0% {
left:48.75%;
bottom:48.75%;
}
100% {
left:${coordinates[0]}%;
bottom:${coordinates[1]}%;
}

Answer 1

This is only an example, if you point out what you've tried out I'll can be more specific:
const base = 100;
class Hello extends React.Component {
state = {
myStyle : {
marginTop: base,
marginLeft: -base,
}
}
plusMinus = () => Math.random() < 0.5 ? -1 : 1;
randomize = () => {
this.setState({
myStyle: {
marginTop: Math.random()*base*this.plusMinus(),
marginBottom: Math.random()*base*this.plusMinus(),
},
});
}
render() {
return <div><img
style={{...this.state.myStyle}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/200px-React-icon.svg.png" />
<button onClick={this.randomize}>move</button>
</div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
https://jsfiddle.net/vya19fz2/