0

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>
John Stafford
  • 565
  • 2
  • 9
  • 29
  • I've edited your code to make it a little easier to work with. It's hard to see the effect in the Snippet, so here's a fiddle: http://jsfiddle.net/9cxy8xj5/ – Rick Hitchcock Feb 27 '15 at 19:24
  • [Possible duplicate of this](http://stackoverflow.com/questions/16795548/rotate-and-translate) – anpsmn Feb 27 '15 at 19:29

1 Answers1

0

Your second transforms are overriding your first.

To have multiple transforms, do it like this:

transform: translate3d(-50%, -50%, 0) skewX(5deg);

Working Fiddle

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • Wow, this looks like a limitation of CSS3. I will test this out later. – John Stafford Feb 27 '15 at 20:37
  • I appreciate your answer Rick. I was not aware of this. I will test out later and award you the green check mark if this is indeed the problem. – John Stafford Feb 27 '15 at 20:42
  • Hmm...Well, I have tested and you are correct Rick, the two lines of transform are a problem. Not sure why it is moving vertically though? Any answers on this? – John Stafford Feb 27 '15 at 21:34
  • You're animating the y-axis in addition to the x-axis. Is this what you're going for? http://jsfiddle.net/0esrwewo/ – Rick Hitchcock Feb 27 '15 at 21:39
  • I see it now. Okay, it looks like my addition of translate3d(0, + or - value, 0) in the keyframes s indeed affecting this animation. – John Stafford Feb 27 '15 at 21:39
  • 1
    Darn, you answered my question before I had a chance. Yes, this is this problem. Thanks Rick. – John Stafford Feb 27 '15 at 21:40
  • Rick, any idea on why it does a stepwise movement vertically? I keep the translate3d for the y axis constant throughout the keyframe animation. – John Stafford Feb 27 '15 at 23:23
  • I'm pretty new to @keyframes, but I think it does that because you don't have a constant for the x-axis. If you make it constant and slow down the animation, the y-axis changes smoothly: http://jsfiddle.net/jen63gL5/ – Rick Hitchcock Feb 27 '15 at 23:42
  • I have my kids this weekend. So, I may not get to tinker with this again till Sunday. Interested to see what breaking up into translateX and translateY does. Thank you for your help. Have a good weekend. – John Stafford Feb 28 '15 at 02:18