Почему мои плавающие листья появляются одновременно и едва движутся? ⇐ CSS

[Anonymous]

Я пытаюсь создать плавающую анимацию листьев, используя CSS и эффект параллакса с JavaScript. Моя цель состоит в том, чтобы несколько листьев плавали в немного разных путях и времени на экране. Эффект параллакса и удивляется, мешает ли это анимации?

Код: Выделить всё

[img]images/leaf.png[/img]
[img]images/leaf.png[/img]
[img]images/leaf.png[/img]

css

Код: Выделить всё

.floating-leaf {
position: absolute;
width: 24px;
height: 24px;
z-index: 1;
animation: float 12s linear infinite;
opacity: 0.7;
}

@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0;
}
10%, 90% { opacity: 0.7; }
100% {
transform: translate(100px, -100px) rotate(360deg);
opacity: 0;
}
}

#leaf1 { top: 80px; left: 10%; animation-delay: 0s; }
#leaf2 { top: 50px; left: 80%; animation-delay: 1s; }
#leaf3 { top: 30px; left: 45%; animation-delay: 2s; }

javascript (для parallax):
function initLeafParallax() {
window.addEventListener('mousemove', function(e) {
const leaves = document.querySelectorAll('.floating-leaf');
leaves.forEach((leaf, index) => {
const speed = (index + 1) * 0.03;
const x = (window.innerWidth - e.pageX * speed) / 100;
const y = (window.innerHeight - e.pageY * speed) / 100;
leaf.style.transform = `translate(${x}px, ${y}px)`; // could this be overriding CSS animation?
});
});
}
< /code>
Как я могу сделать листья более реалистично, и не все отображаются одновременно?
Любая помощь ценится! < /p>

Подробнее здесь: https://stackoverflow.com/questions/795 ... arely-move