{"id":2009,"date":"2018-03-13T00:08:48","date_gmt":"2018-03-13T00:08:48","guid":{"rendered":"http:\/\/thingography.com\/?p=2009"},"modified":"2025-02-13T20:58:03","modified_gmt":"2025-02-13T20:58:03","slug":"css-texta2","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-texta2\/","title":{"rendered":"CSS Text Animations &#8211; Arizona"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: 600px;\n\tbackground: url(http:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/texta2\/gc.jpg) no-repeat center center fixed;\n\t-webkit-background-size: cover;\n\t-moz-background-size: cover;\n\t-ms-background-size: cover;\n\t-o-background-size: cover;\n\tbackground-size: cover;\n}\n#mainlogo  {\n\tmargin-right: auto;\n\tmargin-left: auto;\n\twidth: 100%;\n\theight: 140px;\n\tmin-width: 700px;\n\tmargin-top: 300px;\n\tposition: relative;\n}\n#mainlogo  {\n    \tbackground-image: linear-gradient(top, #E7DFFF, #40C6E8);\n\tbackground-image: -moz-linear-gradient(top, #E7DFFF, #40C6E8);\n\tbackground-image: -webkit-linear-gradient(top, #E7DFFF, #40C6E8);\n\tbackground-image: -o-linear-gradient(top, #E7DFFF, #40C6E8);\n\tbackground-image: -ms-linear-gradient(top, #E7DFFF, #40C6E8);\n}\n\/*  **** Phase 1 ****  *\/\n.word {\n\tpadding: 0;\n\tmargin: 150px auto 0;\n\theight: 120px;\n\twidth: 700px;\n\topacity: 0;\n\tposition: relative;\n\ttop: 0;\n\tanimation: one 4.2s;\n}\n@keyframes one  {\n\t0%  {z-index:  3; opacity: 1;}\n\t99% {z-index:  3; opacity: 1;}\n\t100%{z-index: -1; opacity: 0;}\n}\n#letter1, #letter2, #letter3, #letter4, #letter5, #letter6, #letter7 {\n\tpadding: 0;\n\tmargin: 5px 0 0;\n\tfont-size: 90px;\n\tfont-family: JasmineUPC;\n\ttext-transform: capitalize;\n\tcolor: #FF0000;\n\tfont-weight: bold;\n\tline-height: 110px;\n\tfloat: left;\n\twidth: 100px;\n\ttext-align: center;\n\tanimation: amazing 4.2s;\n}\n@keyframes amazing  {\n\t0%  {width:  0px; opacity: 0; font: 0;}\n\t10% {width:  0px; opacity: 0;}\n\t80% {width:100px;}\n\t100%{width:100px;}\n}\n\/* **** Phase 2 ****  *\/\n.worda {\n\tpadding: 0;\n\tmargin: 0 auto;\n\theight: 120px;\n\twidth: 700px;\n\topacity: 0;\n\tposition: relative;\n\ttop: -120px;\n\tanimation: two 4.2s;\n\tanimation-delay: 4s;\n}\n@keyframes two {\n\t0%  {opacity: 1;}\n\t1%  {opacity: 1;}\n\t99% {opacity: 1;}\n\t100%{opacity: 0;}\n}\n#letter1a, #letter2a, #letter3a, #letter4a, #letter5a, #letter6a, #letter7a {\n\tpadding: 0;\n\tmargin: 5px 0 0;\n\tfont-size: 90px;\n\tfont-family: JasmineUPC;\n\ttext-transform: capitalize;\n\tcolor: #FF0000;\n\tfont-weight: bold;\n\tline-height: 110px;\n\tfloat: left;\n\twidth: 100px;\n\ttext-align: center;\n}\n#letter1a, #letter2a, #letter5a, #letter6a, #letter7a {\n\twidth:  0;\n\topacity:0;\n\tanimation: lose 4.2s;\n\tanimation-delay: 4s;\n}\n@keyframes lose {\n\t0%  {width:100px; opacity: 1;}\n\t1%  {width:100px; opacity: 1;}\n\t40% {width:100px; opacity: 0.2;}\n\t80% {width:  0px; opacity: 0;}\n\t100%{width:  0px; opacity: 0;}\n}\n\/* **** Phase 3 **** *\/\n.wordb {\n\tpadding: 0;\n\tmargin: 0 auto;\n\theight: 120px;\n\twidth: 700px;\n\topacity: 1;\n\tposition: relative;\n\ttop: -240px;\n\tanimation: three 12s;\n}\n@keyframes three {\n\t0%     {opacity: 0;}\n\t66.65% {opacity: 0;}\n\t66.66% {opacity: 1;}\n\t99%    {opacity: 1;}\n\t100%   {opacity: 1;}\n}\n#letter1b, #letter2b, #letter3b, #letter4b, #letter5b, #letter6b, #letter7b {\n\tpadding: 0px;\n\tmargin: 5px 0 0;\n\tfont-size: 90px;\n\tfont-family: JasmineUPC;\n\ttext-transform: capitalize;\n\tcolor: #FF0000;\n\tfont-weight: bold;\n\tline-height: 110px;\n\tfloat: left;\n\twidth: 100px;\n\ttext-align: center;\n\ttext-shadow: 2px 5px 10px #000000, 0 0 2px #000;\n\tanimation: shad 4s;\n\tanimation-delay: 8s;\n}\n@keyframes shad {\n\t0%  {text-shadow: 0px 0px  0px #000000;}\n\t50% {text-shadow: 2px 5px 10px #000000;}\n\t100%{text-shadow: 2px 5px 10px #000000;}\n}\n#letter2b, #letter3b, #letter5b, #letter6b, #letter7b {\n\twidth: 100px;\n\tanimation: expand 4s;\n\tanimation-delay: 8s;\n}\n@keyframes expand  {\n\t0%  {width:0px;   opacity: 0;}\n\t20% {width:0px;   opacity: 0;}\n\t80% {width:100px; opacity: 1;}\n\t100%{width:100px; opacity: 1;}\n}\n\/* **** Phase 4 **** *\/\n.logo {\n\twidth: 400px;\n\tfont-family: \"BernhardFashion BT\";\n\tfont-size: 24px;\n\tcolor: #FFF;\n\ttext-align: center;\n\tmargin:0 auto;\n\tposition: relative;\n\ttop: -255px;\n\tletter-spacing: 5px;\n\tfont-weight: bold;\n\ttext-shadow: 2px 0 4px #000;\n\tanimation: appear 16s;\n}\n@keyframes appear {\n\t0%   {opacity: 0;}\n\t70%  {opacity: 0;}\n\t75%  {opacity: 1;}\n\t100% {opacity: 1;}\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"mainlogo\">\n<div class=\"word\">\n<div id=\"letter1\"> a <\/div>\n<div id=\"letter2\"> m <\/div>\n<div id=\"letter3\"> a <\/div>\n<div id=\"letter4\"> z <\/div>\n<div id=\"letter5\"> i <\/div>\n<div id=\"letter6\"> n <\/div>\n<div id=\"letter7\"> g <\/div>\n<\/p><\/div>\n<div class=\"worda\">\n<div id=\"letter1a\"> a <\/div>\n<div id=\"letter2a\"> m <\/div>\n<div id=\"letter3a\"> a <\/div>\n<div id=\"letter4a\"> z <\/div>\n<div id=\"letter5a\"> i <\/div>\n<div id=\"letter6a\"> n <\/div>\n<div id=\"letter7a\"> g <\/div>\n<\/p><\/div>\n<div class=\"wordb\">\n<div id=\"letter1b\"> A <\/div>\n<div id=\"letter2b\"> r <\/div>\n<div id=\"letter3b\"> i <\/div>\n<div id=\"letter4b\"> z <\/div>\n<div id=\"letter5b\"> o <\/div>\n<div id=\"letter6b\"> n <\/div>\n<div id=\"letter7b\"> a <\/div>\n<\/p><\/div>\n<div class=\"logo\"> The Center of Amazing<\/div>\n<\/p><\/div>\n<\/div>\n<p> <!-- Close  Ani  --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>a m a z i n g a m a z i n g A r i z o n a The Center of Amazing<\/p>\n","protected":false},"author":2,"featured_media":2612,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,195,4,5,196,193],"class_list":["post-2009","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-arizona","tag-css","tag-css-animation","tag-grand-canyon","tag-text"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2009","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=2009"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2009\/revisions"}],"predecessor-version":[{"id":2634,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2009\/revisions\/2634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2612"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}