wildcats – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 20:57:54 +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;}
}
]]>
