Question

我希望在加载页面时出现该文本（例如：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>

我做错了什么，以及如何纠正错误？

Answer 1

你几乎就在那里，你需要绝对定位你的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>

CSS文字出现

1 个答案: