I am trying to create a CSS animation that makes multiple objects slide from right to left. The height of these objects should be random and the speed of the animation should also vary randomly. While I have successfully achieved this using JavaScript, I am facing an issue where the objects seem to randomly "refresh" or jump around the page. Despite trying several methods to troubleshoot, I have been unable to pinpoint the root cause of this problem.
My goal is to replicate the background animation seen on the following website:
Below is the code snippet I am currently working with:
Thanks
Edit:
I should note that this code only functions properly in Chrome for now.
"use strict";
/*jslint devel: true */
// JavaScript code here
:root {
/* CSS variables definitions */
}
div.box1 {
/* Styles for box 1 */
}
/* Keyframes animations for each box */
@keyframes example1 {
/* Animation keyframes for box 1 */
}
/* Repeat the above @keyframes block for all boxes (example2, example3, etc.) */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animation Test</title>
<script type="text/javascript" src="java.js"></script>
</head>
<body>
<!-- HTML structure for displaying animated boxes -->
<div id="boxref1">
<div class="box1">Box 1</div>
</div>
<!-- Repeat the above div structure for other boxes (box2, box3, etc.) -->
</body>
</html>