wildcats – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:14:11 +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