arizona – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:15:09 +0000 en-US hourly 1 Text CSS Animation – Wildcats https://thingography.com/css-texta1/ https://thingography.com/css-texta1/#respond Tue, 13 Mar 2018 00:15:32 +0000 http://thingography.com/?p=1986 .ani-box {width: 100%; height: auto; background: #d1f0ff; background: -moz-linear-gradient(top, #d1f0ff 0%, #e5e5e5 100%, #207cca 100%, #207cca 100%); background: -webkit-linear-gradient(top, #d1f0ff 0%,#e5e5e5 100%,#207cca 100%,#207cca 100%); background: linear-gradient(to bottom, #d1f0ff 0%,#e5e5e5 100%,#207cca 100%,#207cca 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f0ff', endColorstr='#207cca',GradientType=0 ); } #words { position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; } .word { padding: 0; margin: 0 auto 0; width: 100%; } .new-word { padding: 0; margin: 0 auto 0; width: 100%; position: absolute; left: 0; top: 0; } /* ===== A in Arizona ===== */ .word div, .new-word div { padding: 2px 5px; font-weight: bold; line-height: 1em; color: #FF0000; font-size: 5em; font-family: JasmineUPC; text-transform: capitalize; text-shadow: 3px 3px 12px black; display:inline-block; position: relative; margin: 0 auto; font-size: 300%; font-size: 8vw; height: auto; } .word div { animation: amazing 20s linear infinite; } .new-word div { animation: amazing2 20s linear infinite; } #letter1a img { height: auto; width: 100%; } /* ===== Image ===== */ #cat { margin: 0em auto 1em; width: 90%; height: auto; text-align: center; } #wc { margin: 0 auto; width: 100%; height: auto; max-width: 450px; animation: amazing3 20s linear infinite; } /* ===== TEXT 1 Animation ===== */ @keyframes amazing { 0% {transform: scale(0); opacity: 1;} 25% {transform: scale(1); opacity: 1;} 50% {transform: scale(0); opacity: 1;} 51% {transform: scale(0); opacity: 0;} 100% {transform: scale(0); opacity: 0;} } @keyframes amazing2 { 0% {transform: scale(0); opacity: 0;} 50% {transform: scale(0); opacity: 0;} 51% {transform: scale(0); opacity: 1;} 75% {transform: scale(1); opacity: 1;} 100% {transform: scale(0); opacity: 1;} } /* ===== Image Animation ===== */ @keyframes amazing3 { 0% {transform: scale(0.1); opacity: 0;} 100%{transform: scale(1); opacity: 1;} }
a
m
a
z
i
n
g

a
r
i
z
o
n
a

AZ-WC

]]> https://thingography.com/css-texta1/feed/ 0 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