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

真ん中のdivコンテナはそれを容易にするために除去することができ、また、@keyframesに正しいtransform値を設定してください。

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>