.fallingObject { color: #fff; font-size: 1em; font-family: Arial; pointer-events: none; text-shadow: 0 0 1px #000; } @keyframes fallingObjects-fall { 0% { top: -10%; } 100% { top: 100%; } } @keyframes fallingObjects-shake { 0% { transform: translateX(0px); } 50% { transform: translateX(80px); } 100% { transform: translateX(0px); } } .fallingObject { position: fixed; top: -10%; z-index: 9999; user-select: none; cursor: default; animation-name: fallingObjects-fall, fallingObjects-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running; } .fallingObject:nth-of-type(0) { left: 1%; animation-delay: 0s, 0s; & > div { transform: rotate(45deg); } } .fallingObject:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; & > div { transform: rotate(10deg); } } .fallingObject:nth-of-type(2) { left: 20%; animation-delay: 6s, 0.5s; & > div { transform: rotate(60deg); } } .fallingObject:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; & > div { transform: rotate(84deg); } } .fallingObject:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; & > div { transform: rotate(267deg); } } .fallingObject:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; & > div { transform: rotate(200deg); } } .fallingObject:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; & > div { transform: rotate(20deg); } } .fallingObject:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; & > div { transform: rotate(78deg); } } .fallingObject:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; & > div { transform: rotate(3120deg); } } .fallingObject:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; & > div { transform: rotate(123deg); } }