html - 动画发生时元素不移动

因此，我现在正在学习CSS和JS，并且尝试制作一行文本，其中文本的第一部分动画化，而第二部分则没有动画，但是当我这样做时，第二个文本会移动第一次改变。

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：

.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

我确实将第二个文本的位置设置为绝对位置，然后将其固定为垂直位置，但仍然移到了侧面。
如何使第二个文本停留在同一位置而不移动？
谢谢！

最佳答案

您需要定义一个left:或right:值。这样可以防止文本被移动。