アニメーションが発生したときに要素が移動しない

CSSとJSを学習していますが、テキストの最初の部分がアニメーション化され、2番目の部分がアニメーション化された行を作成しようとしていますが、私はそれを行う、2番目のテキストの動きが最初に変更されます。アニメーションが発生したときに要素が移動しない

HTML：

<div class="AnimatedText"><span class="wiggle1">F</span><span class="wiggle2">i</span><span class="wiggle3">r</span><span class="wiggle1">s</span><span class="wiggle2">t</span><span class="wiggle3">T</span><span class="wiggle1">e</span><span class="wiggle2">x</span><span class="wiggle3">T</span><span class="text1"> second text.</span> 
</div>

はCSS：私は絶対に2番目のテキストの位置を設定しなかった

.AnimatedText { 
    width: 100%; 
    background-color: #ff0000; 
    text-align: center; 
    color: white; 
    } 

.wiggle1 { 
    -webkit-animation: mymove 1s linear; 
    animation: mymove 1s linear; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    position: relative; 
    vertical-align: middle; 
} 

.wiggle2 { 
    -webkit-animation: mymove1 1s linear; 
    animation: mymove1 1s linear; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    position: relative; 
    vertical-align: middle; 
} 

.wiggle3 { 
    -webkit-animation: mymove2 1s linear; 
    animation: mymove2 1s linear; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    position: relative; 
    vertical-align: middle; 
} 

.text1 { 
    position: absolute; 
} 

@-webkit-keyframes mymove { 
    0% {font-size: 100%;} 
    25% {font-size: 120%;} 
    50% {font-size: 140%;} 
    75% {font-size: 130%;} 
    100% {font-size: 100%;} 
} 

@-webkit-keyframes mymove1 { 
    0% {font-size: 120%;} 
    25% {font-size: 140%;} 
    50% {font-size: 120%;} 
    75% {font-size: 100%;} 
    100% {font-size: 120%;} 
} 

@-webkit-keyframes mymove2 { 
    0% {font-size: 140%;} 
    25% {font-size: 120%;} 
    50% {font-size: 100%;} 
    75% {font-size: 120%;} 
    100% {font-size: 140%;} 
}

DEMO

、それは、垂直方向の位置を固定しましたしかしそれはまだ側に行く。 2番目のテキストを移動せずに同じ場所に置くことはできますか？
ありがとうございます！

出典

2017-05-08 Dédi