/* Базовый стиль листа */ .leaf { position: absolute; top: -10%; width: 20px; height: 20px; opacity: 0.85; will-change: transform, opacity; /* Анимация падения и покачивания – длительность и задержка задаются через JS */ animation: fall var(--duration) linear infinite, sway var(--duration) ease-in-out infinite alternate; animation-delay: var(--delay), var(--delay); } /* Ключевые кадры для падения вниз с вращением */ @keyframes fall { 0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.9; } 100% { transform: translateY(110vh) rotate(720deg) scale(0.2); opacity: 0; } } /* Ключевые кадры для горизонтального покачивания (ветер) */ @keyframes sway { 0% { transform: translateX(-30px); } 100% { transform: translateX(30px); } } /* Дополнительное оформление – тень для объёма */ .leaf::after { content: ''; position: absolute; top: 2px; left: 2px; width: 100%; height: 100%; background: rgba(0,0,0,0.1); border-radius: inherit; filter: blur(1px); z-index: -1; }