Javascript 通过平滑移动在页面上移动元素

我试图用一种合乎逻辑和真实的方式在整个页面中移动一只蟑螂

我写了这段代码，但状态不好。 此代码不符合逻辑，请澄清 我希望他的动作合乎逻辑，这样他就可以浏览整个页面，对所有屏幕都灵活 有人能帮忙吗`

$（函数（）{
变量x=$（“.container”）；
setTimeout（函数（）{
x、 addClass（“第一”）；
}, 1000);
setTimeout（函数（）{
$（x）.children（）.css（{transition:2s}）；
$（x）.css（{transition:4s}）；
x、 第二类（下称“第二类”）；
}, 2000);
setTimeout（函数（）{
$（x）.children（）.css（{transition:0s}）；
$（x）.css（{transition:0s}）；
x、 addClass（“第三”）；
}, 4000);
setTimeout（函数（）{
$（x）.children（）.css（{transition:4s}）；
$（x）.css（{transition:2s}）；
x、 addClass（“第四”）；
}, 6000);
setTimeout（函数（）{
$（x）.children（）.css（{transition:2s}）；
$（x）.css（{transition:3s}）；
x、 addClass（“第五”）；
}, 8000);
})

.container{
位置：固定；
底部：10px；
左：10px；
转变：转变1s；
}
.集装箱优先{
转换：translateX（200px）；
}
img{
宽度：60px；
高度：60px；
边界半径：2px；
转变：转变2s；
}
.container.first img{
变换：translateY（-100px）旋转（-50度）；
}
.container.first.second img{
变换：translateY（-200px）旋转（-135度）；
}
.容器，第一，第二{
转换：translateX（-200px）；
}
.container.first.second.third img{
变换：translateX（-20px）translateY（-250px）旋转（30度）；
}
.容器，第一，第二，第三{
转换：translateX（-50px）标度（1,1.6）；
}  
.container.first.second.third.4th img{
变换：translateY（-450px）旋转（-55度）；
}
.容器.第一.第二.第三.第四{
转换：translateX（400px）；
}
.container.first.second.third.fourth.fifth img{
变换：translateY（-700px）旋转（-90度）；
}
.集装箱。第一。第二。第三。第四。第五{
转换：translateX（250px）；
}

您是指随机路径吗？目前，您的逻辑遵循相同的路径，但不清楚您想要的是什么。你说的“逻辑”是什么意思？是否希望移动是随机的，但保持在窗口内？更多的信息将有助于随机路径或相同路径，我不在乎@Rohit.007我希望在页面上平滑移动它，无论它是随机的还是非随机的@MichaelBeeson