arizona – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 20:58:03 +0000
en-US
hourly
1
-
Text CSS Animation – Wildcats
https://thingography.com/css-texta1/
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;}
}
]]>
-
CSS Text Animations – Arizona
https://thingography.com/css-texta2/
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;}
}
]]>
