grand canyon – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:15:09 +0000 en-US hourly 1 CSS Text Animations – Arizona https://thingography.com/css-texta2/ https://thingography.com/css-texta2/#respond Tue, 13 Mar 2018 00:08:48 +0000 http://thingography.com/?p=2009 .ani-box {width: 100%; height: 600px; background: url(http://thingography.com/my-things/wp-content/uploads/css-img/texta2/gc.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } #mainlogo { margin-right: auto; margin-left: auto; width: 100%; height: 140px; min-width: 700px; margin-top: 300px; position: relative; } #mainlogo { background-image: linear-gradient(top, #E7DFFF, #40C6E8); background-image: -moz-linear-gradient(top, #E7DFFF, #40C6E8); background-image: -webkit-linear-gradient(top, #E7DFFF, #40C6E8); background-image: -o-linear-gradient(top, #E7DFFF, #40C6E8); background-image: -ms-linear-gradient(top, #E7DFFF, #40C6E8); } /* **** Phase 1 **** */ .word { padding: 0; margin: 150px auto 0; height: 120px; width: 700px; opacity: 0; position: relative; top: 0; animation: one 4.2s; } @keyframes one { 0% {z-index: 3; opacity: 1;} 99% {z-index: 3; opacity: 1;} 100%{z-index: -1; opacity: 0;} } #letter1, #letter2, #letter3, #letter4, #letter5, #letter6, #letter7 { padding: 0; margin: 5px 0 0; font-size: 90px; font-family: JasmineUPC; text-transform: capitalize; color: #FF0000; font-weight: bold; line-height: 110px; float: left; width: 100px; text-align: center; animation: amazing 4.2s; } @keyframes amazing { 0% {width: 0px; opacity: 0; font: 0;} 10% {width: 0px; opacity: 0;} 80% {width:100px;} 100%{width:100px;} } /* **** Phase 2 **** */ .worda { padding: 0; margin: 0 auto; height: 120px; width: 700px; opacity: 0; position: relative; top: -120px; animation: two 4.2s; animation-delay: 4s; } @keyframes two { 0% {opacity: 1;} 1% {opacity: 1;} 99% {opacity: 1;} 100%{opacity: 0;} } #letter1a, #letter2a, #letter3a, #letter4a, #letter5a, #letter6a, #letter7a { padding: 0; margin: 5px 0 0; font-size: 90px; font-family: JasmineUPC; text-transform: capitalize; color: #FF0000; font-weight: bold; line-height: 110px; float: left; width: 100px; text-align: center; } #letter1a, #letter2a, #letter5a, #letter6a, #letter7a { width: 0; opacity:0; animation: lose 4.2s; animation-delay: 4s; } @keyframes lose { 0% {width:100px; opacity: 1;} 1% {width:100px; opacity: 1;} 40% {width:100px; opacity: 0.2;} 80% {width: 0px; opacity: 0;} 100%{width: 0px; opacity: 0;} } /* **** Phase 3 **** */ .wordb { padding: 0; margin: 0 auto; height: 120px; width: 700px; opacity: 1; position: relative; top: -240px; animation: three 12s; } @keyframes three { 0% {opacity: 0;} 66.65% {opacity: 0;} 66.66% {opacity: 1;} 99% {opacity: 1;} 100% {opacity: 1;} } #letter1b, #letter2b, #letter3b, #letter4b, #letter5b, #letter6b, #letter7b { padding: 0px; margin: 5px 0 0; font-size: 90px; font-family: JasmineUPC; text-transform: capitalize; color: #FF0000; font-weight: bold; line-height: 110px; float: left; width: 100px; text-align: center; text-shadow: 2px 5px 10px #000000, 0 0 2px #000; animation: shad 4s; animation-delay: 8s; } @keyframes shad { 0% {text-shadow: 0px 0px 0px #000000;} 50% {text-shadow: 2px 5px 10px #000000;} 100%{text-shadow: 2px 5px 10px #000000;} } #letter2b, #letter3b, #letter5b, #letter6b, #letter7b { width: 100px; animation: expand 4s; animation-delay: 8s; } @keyframes expand { 0% {width:0px; opacity: 0;} 20% {width:0px; opacity: 0;} 80% {width:100px; opacity: 1;} 100%{width:100px; opacity: 1;} } /* **** Phase 4 **** */ .logo { width: 400px; font-family: "BernhardFashion BT"; font-size: 24px; color: #FFF; text-align: center; margin:0 auto; position: relative; top: -255px; letter-spacing: 5px; font-weight: bold; text-shadow: 2px 0 4px #000; animation: appear 16s; } @keyframes appear { 0% {opacity: 0;} 70% {opacity: 0;} 75% {opacity: 1;} 100% {opacity: 1;} }

]]> https://thingography.com/css-texta2/feed/ 0