Question

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

非常感谢帮助！

＆＃13;

<!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>

＆＃13;

Answer 1

您可以简单地将更高的值设置为margin-left，例如＆＃34; 101％＆＃34;，并且文本消失。

无论如何，根据this link，我建议您使用 CSS翻译替换margin-left，以获得更好的效果。在最后一种情况下，由于CSS转换的特定行为（解释here），您在overflow:hidden标记上也不需要Body以避免水平滚动条。

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

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

Answer 2

将边距添加到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%;   }
}

Answer 3

只需将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>

Answer 4

这是针对同一问题的另一种解决方案：
我们从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>

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

4 个答案: