User:Frostly/snowflakes.css

.snowflake { color: #fff; font-size: 1em; font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; }

@keyframes snowflakes-fall { 0% {   top: -10%; } 100% {    top: 100%; } }

@keyframes snowflakes-shake { 0% {   transform: translateX(0px); } 50% {    transform: translateX(80px); } 100% {    transform: translateX(0px); } }

.snowflake { position: fixed; top: -10%; z-index: 9999; user-select: none; cursor: default; animation-name: snowflakes-fall, snowflakes-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running; }

.snowflake:nth-of-type(1) { left: 1%; animation-delay: 0s, 0s; }

.snowflake:nth-of-type(2) { left: 10%; animation-delay: 1s, 1s; }

.snowflake:nth-of-type(3) { left: 20%; animation-delay: 6s, 0.5s; }

.snowflake:nth-of-type(4) { left: 30%; animation-delay: 4s, 2s; }

.snowflake:nth-of-type(5) { left: 40%; animation-delay: 2s, 2s; }

.snowflake:nth-of-type(6) { left: 50%; animation-delay: 8s, 3s; }

.snowflake:nth-of-type(7) { left: 60%; animation-delay: 6s, 2s; }

.snowflake:nth-of-type(8) { left: 70%; animation-delay: 2.5s, 1s; }

.snowflake:nth-of-type(9) { left: 80%; animation-delay: 1s, 0s; }

.snowflake:nth-of-type(10) { left: 90%; animation-delay: 3s, 1.5s; }