html - CSS文字出现

我希望在加载页面时显示该文本（例如：here）。

这该怎么做？经过一番研究，我有了这个（但它不起作用）：

#text p {
  font-size: 21px;
  text-align: center;
  animation: appear 2s;
  -moz-animation: appear 2s;
  /* Firefox */
  -webkit-animation: appear 2s;
  /* Safari and Chrome */
  -o-animation: appear 2s;
  /* Opera */
}
@keyframes appear {
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}
@-moz-keyframes appear {
  /* Firefox */
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}
@-webkit-keyframes appear {
  /* Safari and Chrome */
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}
@-o-keyframes appear {
  /* Opera */
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}

<div id="text">
  <p>Test for the Text</p>
</div>

我在做什么错，如何纠正？

最佳答案

您已经快到了，您需要绝对定位p以便对left属性进行动画处理，我也将其设置为inline-block，因此文本开始显示在屏幕上（否则，您将p标签作为对齐中心，则需要确保您的起始左位置大于屏幕宽度的一半）

#text p {
  display: inline-block;
  font-size: 21px;
  text-align: center;
  position: absolute;
  animation: appear 2s;
  left: 315px;
}
@keyframes appear {
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}
@-moz-keyframes appear {
  /* Firefox */
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}
@-webkit-keyframes appear {
  /* Safari and Chrome */
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}
@-o-keyframes appear {
  /* Opera */
  from {
    left: -100px;
  }
  to {
    left: 315px;
  }
}

<div id="text">
  <p>Test for the Text</p>
</div>

关于html - CSS文字出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41012943/