{"id":1953,"date":"2018-03-12T14:29:59","date_gmt":"2018-03-12T14:29:59","guid":{"rendered":"http:\/\/thingography.com\/?p=1953"},"modified":"2018-11-06T14:17:59","modified_gmt":"2018-11-06T14:17:59","slug":"css-snow","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-snow\/","title":{"rendered":"Snow Falling CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 600px;\n\tbackground: url('http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/snow\/home.jpg') no-repeat center center fixed; \n  \tbackground-size: cover;\t\n}\n.layer0, .layer1, .layer2, .layer3 {\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0px;\n\tleft: 0px;\n\tposition: absolute;\n\topacity: 1;\n}\n.layer0  {\n\tbackground-image: url('http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/snow\/snow-0.png');\n\tanimation: snow0 10s linear infinite;\n}\n.layer1  {\n\topacity: 0.5;\n\tbackground-image: url('http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/snow\/snow-1.png');\n\tanimation: snow1 25s linear infinite, snow1z 40s linear;  \n}\n.layer2  {\n\tbackground-image: url('http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/snow\/snow-2.png');\n\tanimation: snow2 17s linear infinite, snow2z 40s linear;\n}\n.layer3  {\n\tbackground-image: url('http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/snow\/snow-3.png'); \n\tanimation: snow3 13s linear infinite, snow3z 40s linear;\n}\n\/* Layer 0 - Base Layer Snow Falling Animation *\/\n@keyframes snow0 { \n\t0%  {background-position:   0px   0px;} \n\t100%{background-position: 300px 300px;}\n}\n\/* Layer 1 - 1st Addition Snow Falling Animation *\/\n@keyframes snow1 { \n\t0%  {background-position:   0px   0px;}\n\t100%{background-position: 500px 500px;}\n}\n\/* Layer 2 - 2nd Addition Snow Falling Animation *\/\n@keyframes snow2 { \n\t0%  {background-position:   0px   0px; transform: skewY( 0deg);}\n\t50% {                                  transform: skewY(10deg);}\n\t100%{background-position: 400px 400px; transform: skewY( 0deg);}\n}\n\/* Layer 3 - 3rd Addition Snow Falling Animation *\/\n@keyframes snow3 { \n\t0%  {background-position:   0px   0px;}\n\t100%{background-position: 400px 400px;}\n}\n\/* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time *\/\n@keyframes snow1z { \n\t0%  { opacity: 0.0;}\n\t50% { opacity: 0.7;}\n\t100%{ opacity: 0.5;}\n}\n\/* Sbow Layer 2 Addition Fade-In Animation *\/\n@keyframes snow2z { \n\t0%  { opacity: 0;}\n\t25% { opacity: 0;}\n\t50% { opacity: 1;}\n\t100%{ opacity: 1;}\n}\n\/* Sbow Layer 3 Addition Fade-In Animation *\/\n@keyframes snow3z { \n\t0%  { opacity: 0;}\n\t50% { opacity: 0;}\n\t75% { opacity: 1;}\n\t100%{ opacity: 1;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"container\">\n<div class=\"layer0\"><\/div>\n<div class=\"layer1\"><\/div>\n<div class=\"layer2\"><\/div>\n<div class=\"layer3\"><\/div>\n<\/div>\n<p> <!-- container -->\n<\/div>\n<div class=\"below-ani\"> 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.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":2,"featured_media":2604,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,189,164],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1953"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=1953"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1953\/revisions"}],"predecessor-version":[{"id":1965,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1953\/revisions\/1965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2604"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}