{"id":130,"date":"2018-02-18T21:12:34","date_gmt":"2018-02-18T21:12:34","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=130"},"modified":"2025-02-13T21:08:15","modified_gmt":"2025-02-13T21:08:15","slug":"css-happy-new-year","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-happy-new-year\/","title":{"rendered":"Happy New Year CSS Animation"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 100%; position: relative; }\n.bas1, .bas2, .bas3, .bas4, .bas5, .bas6, .bas7, .bas8, .bas9, .bas10  {\n\theight: 235px;\n\twidth: 100px;\n\tmargin-left: 50%;\n\tmargin-top: 300px;\n\tposition: absolute;\n\tanimation: float 18s linear infinite, right 15s infinite;\n}\n.bas2  {\n\tmargin-left: 35%;\n\ttransform: scale(0.9,0.9);\n\tanimation: float 10s linear infinite;\n}\n.bas3  {\n\tmargin-left: 75%;\n\tanimation: float 11s linear infinite, left 15s infinite;\n}\n.bas4  {\n\tmargin-left: 60%;\n\ttransform: scale(0.5,0.5);\n\tanimation: float 12s linear infinite;\n}\n.bas5  {\n\tmargin-left: 20%;\n\ttransform: scale(1.1,1.1);\n\tanimation: float 12s linear infinite, left 11s infinite;\n}\n.bas6  {\n\tmargin-left: 85%;\n\tanimation: float 8s linear infinite;\n}\n.bas7  {\n\tmargin-left: 10%;\n\ttransform: scale(0.7,0.7);\n\tanimation: float 9s linear infinite, right 15s infinite;\n}\n.bas8  {\n\tmargin-left: 40%;\n\ttransform: scale(0.6,0.6);\n\tanimation: float 11s linear infinite, right 12s infinite;\n}\n.bas9  {\n\tmargin-left: 0%;\n\ttransform: scale(0.6,0.6);\n\tanimation: float 10s linear infinite, right 12s infinite;\n}\n.bas10  {\n\tmargin-left: 12%;\n\ttransform: scale(0.6,0.6);\n\tanimation: float 15s linear infinite, right 18s infinite;\n}\n\/* Balloon Animation Keyframes  *\/\n@keyframes float  {\n  0% {top: 80%;}\n  100% {top:-70%;}\n} \n@keyframes left  {\n  0% {transform:translateX(  0px);}\n  50%{transform:translateX(-200px);}\n  100% {transform:translateX(  0px);}\n}\n @keyframes right  {\n  0% {transform:translateX(  0px);}\n  50%{transform:translateX(300px);}\n  100% {transform:translateX(  0px);}\n} \n\/* Balloon Shapes *\/\n.red, .blue, .yellow, .green, .orange, .purple, .lblue, .lime, .violet, .red2  {\n\tborder: 1px solid #969696;\n\tdisplay: block;\n\twidth: 94px;\n\theight: 135px;\n\tbackground-color: red;\n\tborder-radius: 50% 50% 50% 50% \/ 40% 40% 60% 60%;\n\tbox-shadow: 0px 0px 5px 0px #555555; \n}\n\/*  Balloon Colors *\/\n.blue   {background-color: blue;}\n.yellow {background-color: yellow;}\n.green  {background-color: green;}\n.purple {background-color: #9900CC;}\n.orange {background-color: orange;}\n.lblue  {background-color: #66FFFF;}\n.lime   {background-color: #66FF33;}\n.violet {background-color: #FF00DC;}\n.red2   {background-color: #FF006E;}\n.string  {\n\twidth: 1px;\n\theight: 100px;\n\tmargin-left: 46px;\n\tbackground-color: #0000FF;\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('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/happy-new-year\/conf-0.png');\n\tanimation: conf0 10s linear infinite;\n}\n.layer1  {\n\topacity: 0.5;\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/happy-new-year\/conf-1.png');\n\tanimation: conf1 25s linear infinite, conf1z 40s linear;   \n}\n.layer2  {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/happy-new-year\/conf-2.png');\n\tanimation: conf2 17s linear infinite, conf2z 40s linear;\n}\n.layer3  {\n\tbackground-image: url('https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/happy-new-year\/conf-3.png'); \n\tanimation: conf3 13s linear infinite, conf2z 40s linear;\n}\n\/* Layer 0 - Base Layer conf Falling Animation *\/\n@keyframes conf0 { \n\t0%  {background-position:   0px   0px;} \n\t100%{background-position: 300px 300px;}\n}\n\/* Layer 1 - 1st Addition conf Falling Animation *\/\n@keyframes conf1 { \n\t0%  {background-position:   0px   0px; transform:scale(1.0,1.0);}\n\t50% {                                  transform:scale(0.9,0.9);}\n\t100%{background-position: 500px 500px; transform:scale(1.0,1.0);}\n}\n\/* Layer 2 - 2nd Addition conf Falling Animation *\/\n@keyframes conf2 { \n\t0%  {background-position:    0px    0px; transform:scale(1.0,1.0) skewY( 0deg);}\n\t50% {                                    transform:scale(0.9,0.9) skewY(10deg);}\n\t100%{background-position:-1000px 1000px; transform:scale(1.0,1.0) skewY( 0deg);}\n}\n\/* Layer 3 - 3rd Addition conf Falling Animation *\/\n@keyframes conf3 { \n\t0%  {background-position: 0px   0px;}\n\t100%{background-position: 0px 400px;}\n}\n\/* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time *\/\n@keyframes conf1z { \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 conf2z { \n\t0%  { opacity: 0;}\n\t25% { opacity: 0;}\n\t50% { opacity: 1;}\n\t100%{ opacity: 1;}\n}\n\/*  Happy New Year Text  *\/\n.text  {\n\tmargin: 2em auto 0em auto;\n\tfont-size: 3em;\n\tfont-family: Arial;\n\ttext-align: center;\n\twidth: 80%;\n\tposition: relative;\n\tletter-spacing: 0.1em;\n\tline-height: 1.2em;\n\ttext-shadow: 0 -0.04em 0.005em #333333, -0.01em -0.01em 0.2em #000000;\n\tz-index: 2;\n\tanimation: conf2z 30s linear infinite;\n}\n\/*  Text Colors *\/\n.text1 {color: #FFFF00;}\n.text3 {color: #FF0000;}\n.text2 {color: #0000FF;}\n.text4 {color: #009933;}\naudio  {\n\theight: 1.6em;\n\tline-height: 1.5em;\n\tbackground-color: #99CCFF;\n\twidth: 240px;\nmargin: 0;\nfloat: right;\n}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"layer0\"><\/div>\n<div class=\"layer1\"><\/div>\n<div class=\"layer2\"><\/div>\n<div class=\"layer3\"><\/div>\n<div class=\"bas1\">\n<div class=\"red\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas2\">\n<div class=\"blue\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas3\">\n<div class=\"yellow\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas4\">\n<div class=\"green\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas5\">\n<div class=\"purple\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas6\">\n<div class=\"orange\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas7\">\n<div class=\"lblue\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas8\">\n<div class=\"lime\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas9\">\n<div class=\"violet\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"bas10\">\n<div class=\"red2\"><\/div>\n<div class=\"string\"><\/div>\n<\/div>\n<div class=\"text\">\n\t<b class=\"text1\"> Happy<\/b> <br \/>\n\t<b class=\"text2\"> New  <\/b><br \/>\n\t<b class=\"text3\"> Year<\/b><br \/>\n\t<b class=\"text4\">2020 <\/b>\n<\/div>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<p><audio loop=\"loop\" autoplay=\"autoplay\" controls=\"controls\"><source src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/happy-new-year\/oas.mp3\" type=\"audio\/mp3\" \/><source src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/happy-new-year\/oas.ogg\" type=\"audio\/ogg\" \/><\/audio> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Happy New Year 2020<\/p>\n","protected":false},"author":2,"featured_media":2591,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,25],"class_list":["post-130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-css","tag-css-animation","tag-happy-new-year"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"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=130"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/130\/revisions"}],"predecessor-version":[{"id":2880,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/130\/revisions\/2880"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2591"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}