CSS3:在不同时间滑入页面的文本行

CSS3: Lines of text sliding into page at different times

本文关键字：文本 同时间 CSS3      更新时间：2023-09-26

我有下面显示的代码，它使用 css3 动画将文本从右到左滑入页面。
我为每行使用不同的动画延迟，但我有一个问题，在动画开始之前，左侧已经可以看到这些行，我不希望这样。
是否有任何方法
a）在动画开始之前保持文本行不可见或
b）一种在不同时间加载行的简单方法（也许使用javascript setTimeout？）或其他技巧？
（注意：我使用的是火狐 35.0.1）

帮助将不胜感激！

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  animation-name: slidein;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  color: red;
  font-size: 3.5em;
  font-family: Arial;
  font-weight:bold;
}
@keyframes slidein {
  0%   { margin-left: 100%; }
  100% { margin-left: 0%;   }
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>

您只需将较高的值设置为左边距，例如"101%"，文本就会消失。

无论如何，我建议您根据此链接将margin-left替换为CSS翻译，以获得更好的性能。在最后一种情况下，由于 CSS 转换的特定行为（此处解释），您也不需要Body标签上overflow:hidden以避免水平滚动条。

 @keyframes slidein {
      0%   { transform: translate(101%); }
      100% {  transform: translate(0%); }
    }

或者，如果你不想设置一个超过100%的"奇怪"值，你可以将我的解决方案与@Herrington Darkholme的解决方案结合起来。

只需将opacity: 0;添加到初始元素中，opacity: 1;添加到动画中即可。但是，您需要在动画结束后保留不透明度。所以animation-fill-mode: forwards;来帮忙。

更新：使用transform: translate(100%);感谢@Luca Detomi

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
  animation-name: slidein;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  color: red;
  font-size: 3.5em;
  font-family: Arial;
  font-weight:bold;
  opacity: 0;
}
@keyframes slidein {
  0%   { transform: translate(101%); opacity:1; }
  100% { transform: translate(0%); opacity:1;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>

将左边距添加到 100% 以上

h1 {
  animation-name: slidein;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  color: red;
  font-size: 3.5em;
  font-family: Arial;
  font-weight:bold;
  margin-left: 105%;
}
@keyframes slidein {
  0%   { margin-left: 105%; }
  100% { margin-left: 0%;   }
}

这是同一问题的另一种解决方案：
我们从 witdh：0px 和 overflow：hidden 开始;（不可见）和端宽：300px。

<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
  animation-name: slidein;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  color: red;
  font-size: 3.5em;
  font-family: Arial;
  font-weight:bold;
  width:0px;
  overflow:hidden;
}
@keyframes slidein {
  0%   { margin-left: 100%; width:300px; }
  100% { margin-left: 0%;   width:300px;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 2s;">THREE</h1>
</body>
</html>

相关文章：