.ani-box {width: 100%; height: 600px;
background: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/home.jpg') no-repeat center center fixed;
background-size: cover;
}
.layer0, .layer1, .layer2, .layer3 {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
opacity: 1;
}
.layer0 {
background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-0.png');
animation: snow0 10s linear infinite;
}
.layer1 {
opacity: 0.5;
background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-1.png');
animation: snow1 25s linear infinite, snow1z 40s linear;
}
.layer2 {
background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-2.png');
animation: snow2 17s linear infinite, snow2z 40s linear;
}
.layer3 {
background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/snow/snow-3.png');
animation: snow3 13s linear infinite, snow3z 40s linear;
}
/* Layer 0 - Base Layer Snow Falling Animation */
@keyframes snow0 {
0% {background-position: 0px 0px;}
100%{background-position: 300px 300px;}
}
/* Layer 1 - 1st Addition Snow Falling Animation */
@keyframes snow1 {
0% {background-position: 0px 0px;}
100%{background-position: 500px 500px;}
}
/* Layer 2 - 2nd Addition Snow Falling Animation */
@keyframes snow2 {
0% {background-position: 0px 0px; transform: skewY( 0deg);}
50% { transform: skewY(10deg);}
100%{background-position: 400px 400px; transform: skewY( 0deg);}
}
/* Layer 3 - 3rd Addition Snow Falling Animation */
@keyframes snow3 {
0% {background-position: 0px 0px;}
100%{background-position: 400px 400px;}
}
/* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time */
@keyframes snow1z {
0% { opacity: 0.0;}
50% { opacity: 0.7;}
100%{ opacity: 0.5;}
}
/* Sbow Layer 2 Addition Fade-In Animation */
@keyframes snow2z {
0% { opacity: 0;}
25% { opacity: 0;}
50% { opacity: 1;}
100%{ opacity: 1;}
}
/* Sbow Layer 3 Addition Fade-In Animation */
@keyframes snow3z {
0% { opacity: 0;}
50% { opacity: 0;}
75% { opacity: 1;}
100%{ opacity: 1;}
}
Who does not want snow falling in their website during the Christmas Holidays while not using JavaScript? An early example of falling snow using CSS and a few PNGs.
]]>