Горизонтально центрирующий текст в анимации CSS

Question

CSS кажется горизонтально центрирующим текст по первой букве. Я бы хотел, чтобы это было идеально сосредоточено на странице, не нарушая анимацию. Я добавил градиент, чтобы показать точный горизонтальный центр страницы.

.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>

Answer 1

Убедитесь, чтобы установить правильные transform значения в @keyframes, а также средний DIV контейнер может быть удален, чтобы сделать его проще.

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>