User:Polygnotus/snow.css

.container { top: 0px; background: #fff; width: 100%; height: 100%; min-height: 800px; position: absolute; left: 0%; background: #1E1E20 url(http://premiumcoding.com/CSSTricks/fallingSnow/Always-winter.jpg) center center no-repeat; background-size: cover; }

.fallingSnow { text-align: center; } .fallingSnow span { display: inline-block; width: 20px; height: 21px; margin: -280px 60px 54px -34px; background:url("http://premiumcoding.com/CSSTricks/fallingSnow/snowflake.png"); -webkit-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29); -moz-animation: fallingSnow 12s infinite cubic-bezier(0.35,0.45,0.39,0.29); } .fallingSnow span:nth-child(5n+5) {

-webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; } .fallingSnow span:nth-child(3n+2) {

-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; } .fallingSnow span:nth-child(2n+5) {

-webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; }

.fallingSnow span:nth-child(3n+10) {

-webkit-animation-delay: 2.7s; -moz-animation-delay: 2.7s; } .fallingSnow span:nth-child(7n+2) {

-webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s; } .fallingSnow span:nth-child(4n+5) {

-webkit-animation-delay: 5.5s; -moz-animation-delay: 5.5s; } .fallingSnow span:nth-child(3n+7) {

-webkit-animation-delay: 8s; -moz-animation-delay: 8s; } @-webkit-keyframes fallingSnow { 0% {   opacity: 1;

-webkit-transform: translate(0, 0px) rotateZ(0deg); } 75% {    opacity: 1;

-webkit-transform: translate(100px, 600px) rotateZ(270deg); } 100% {    opacity: 0;

-webkit-transform: translate(150px, 800px) rotateZ(360deg); } } @-moz-keyframes fallingSnow { 0% {   opacity: 1; -webkit-transform: translate(0, 0px) rotateZ(0deg); } 75% {    opacity: 1; -webkit-transform: translate(100px, 600px) rotateZ(270deg); } 100% {    opacity: 0; -webkit-transform: translate(150px, 800px) rotateZ(360deg); } }