CODEWITHSUNDEEP
csscss-animations
Tronald
Tronald

Reputation: 37

Horizontally centering text in CSS animations

The CSS seems to be horizontally centering the text by the first letter. I'd like to make it be perfectly centered on the page, without breaking the animation. I added a gradient to show the exact horizontal center of the page. 

.wrapper {
  height: 100vh;
  background: linear-gradient(to right, #1e5799 0%,#ffffff 50%,#7db9e8 100%);
}

.container {
  text-align: center;
}

.vcenter {
  position: relative;
  top: calc(50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.container h2 {
  background: red;
  display: inline-block;
  position: absolute;
  opacity: 0;
  overflow: visible;
  -webkit-animation: rotateWord 12s linear infinite 0s;
  -ms-animation: rotateWord 12s linear infinite 0s;
  animation: rotateWord 12s linear infinite 0s;
  margin: 0;
}

.container h2:nth-child(2) {
  -webkit-animation: rotateWord 12s linear infinite 3s;
  -ms-animation: rotateWord 12s linear infinite 3s;
  animation: rotateWord 12s linear infinite 3s;
}

.container h2:nth-child(3) {
  -webkit-animation: rotateWord 12s linear infinite 6s;
  -ms-animation: rotateWord 12s linear infinite 6s;
  animation: rotateWord 12s linear infinite 6s;
}

.container h2:nth-child(4) {
  -webkit-animation: rotateWord 12s linear infinite 9s;
  -ms-animation: rotateWord 12s linear infinite 9s;
  animation: rotateWord 12s linear infinite 9s;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<div class="wrapper">
  <div class="container vcenter">
    <h2>HEY THERE THIS IS TEXT</h2>
    <h2>DIFFERENT TEXT</h2>
    <h2>THIS IS TEXT</h2>
    <h2>DIFFERENT LENGTHS OF TEXT</h2>
  </div>
</div>

Upvotes: 2

Views: 1198

Answers (1)

Stickers
Stickers

Reputation: 78686

Make sure to set the correct transform values in the @keyframes, also the middle div container can be removed to make it easier.

jsFiddle

body {
  margin: 0;
}

.container {
  height: 100vh;
  text-align: center;
  background: linear-gradient(to right, #1e5799 0%, #ffffff 50%, #7db9e8 100%);
}

.container h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  margin: 0;
}

.container h2:nth-child(1) {
  animation: rotateWord 12s linear infinite 0s;
}

.container h2:nth-child(2) {
  animation: rotateWord 12s linear infinite 3s;
}

.container h2:nth-child(3) {
  animation: rotateWord 12s linear infinite 6s;
}

.container h2:nth-child(4) {
  animation: rotateWord 12s linear infinite 9s;
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
  5% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
  17% {
    opacity: 1;
    transform: translate(-50%, 0px);
  }
  20% {
    opacity: 0;
    transform: translate(-50%, 30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<div class="container">
  <h2>HEY THERE THIS IS TEXT</h2>
  <h2>DIFFERENT TEXT</h2>
  <h2>THIS IS TEXT</h2>
  <h2>DIFFERENT LENGTHS OF TEXT</h2>
</div>

Upvotes: 3

Related Questions