Can anyone tell me why this transform translate3d on the upperTitle and lowerTitle elements in the +X and -X are not working? It probably is an oversight, but I don't see it. Thank you for your time. The skew works, but I was hoping for the upperTitle to come in from the left, and the lowerTitle to come in from the right, using transform: translate3d(-x%, 0, 0) and translate3d(+x%, 0, 0), respectively.
#parent {
width: 1000px;
height: 600px;
border: 1px solid;
}
.titleLayer {
position: absolute;
z-index: 14;
}
#titleContainer {
position: relative;
height: 100%;
}
#upperTitle {
position: absolute;
width: 50%;
height: 15%;
top: 35%;
left: 25%;
text-align: center;
}
#lowerTitle {
position: absolute;
width: 50%;
height: 15%;
bottom: 35%;
right: 25%;
text-align: center;
}
/* w3schools, animations; Chrome, Safari, Opera */
@-webkit-keyframes speedInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-500%, -50%, 0);
-webkit-transform: skewX(-30deg);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-100%, -50%, 0);
-webkit-transform: skewX(20deg);
}
80% {
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: skewX(-5deg);
}
100% {
-webkit-transform: none;
}
}
/* w3schools, animations; Internet Explorer, Standard syntax */
@keyframes speedInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-500%, -50%, 0);
-webkit-transform: skewX(-30deg);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-100%, -50%, 0);
-webkit-transform: skewX(20deg);
}
80% {
-webkit-transform: translate3d(-50%, -50%, 0);
-webkit-transform: skewX(-5deg);
}
100% {
-webkit-transform: none;
}
}
/* w3schools, animations; Chrome, Safari, Opera */
@-webkit-keyframes speedInRight {
0% {
opacity: 0;
transform: translate3d(950%, -50%, 0);
transform: skewX(30deg);
}
60% {
opacity: 1;
transform: translate3d(200%, -50%, 0);
transform: skewX(-20deg);
}
80% {
transform: translate3d(-50%, -50%, 0);
transform: skewX(5deg);
}
100% {
transform: none;
}
}
/* w3schools, animations; Internet Explorer, Standard syntax */
@keyframes speedInRight {
0% {
opacity: 0;
transform: translate3d(950%, -50%, 0);
transform: skewX(30deg);
}
60% {
opacity: 1;
transform: translate3d(200%, -50%, 0);
transform: skewX(-20deg);
}
80% {
transform: translate3d(-50%, -50%, 0);
transform: skewX(5deg);
}
100% {
transform: none;
}
}
.speedInLeft {
/* Chrome, Safari, Opera */
-webkit-animation: speedInLeft 1.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
/* Standard syntax */
animation: speedInLeft 1.5s ease-in-out;
animation-fill-mode: forwards;
}
.speedInRight{
/* Chrome, Safari, Opera */
-webkit-animation: speedInRight 1.5s ease-in-out;
-webkit-animation-fill-mode: forwards;
/* Standard syntax */
animation: speedInRight 1.5s ease-in-out;
animation-fill-mode: forwards;
}
@font-face {
font-family: 'open_sans_condlight';
src: url('fonts/opensanscondensedlight/opensans-condlight-webfont.eot');
src: url('fonts/opensanscondensedlight/opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/opensanscondensedlight/opensans-condlight-webfont.woff2') format('woff2'),
url('fonts/opensanscondensedlight/opensans-condlight-webfont.woff') format('woff'),
url('fonts/opensanscondensedlight/opensans-condlight-webfont.ttf') format('truetype'),
url('fonts/opensanscondensedlight/opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
font-weight: normal;
font-style: normal;
}
.textCenter {
text-align: center;
}
.openSansCondensedLight {
font-family: 'open_sans_condlight', Fallback, sans-serif;
}
.fontBold {
font-weight: bold;
}
.fontBlack {
color: #000000;
}
.size5 {
font-size: 500%;
}
<div id="parent">
<div id="titleContainer" class="titleLayer">
<div id="upperTitle" class="speedInLeft">
<span class="openSansCondensedLight fontBlack size5">Quick Loan</span>
</div>
<div id="lowerTitle" class="speedInRight">
<span class="openSansCondensedLight fontBlack size5">Connect</span>
</div>
</div>
</div>