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

Question

我有下面显示的代码，使用css3动画将文本从右向左滑动到页面中。
我为每行使用了不同的动画延迟，但是我遇到的问题是，在动画开始之前，这些行已经在左侧可见，我不希望这样。
有什么办法吗
a）在动画开始之前保持文本行不可见，或
b）一种在不同时间加载行的简单方法（也许使用javascript setTimeout？）或其他技巧？
（注意：我正在使用Firefox 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>

Answer 1

您可以简单地将一个较高的值设置为左边距，例如“ 101％”，文本消失。

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

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

或者，如果您不想将“奇怪”设置为超过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开始，然后溢出：hidden; （不可见），结束宽度：300像素。

 <!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 个解决方案

解决方案1
1 2015-01-30 14:26:34

解决方案2
0 2015-01-30 14:25:29

解决方案3
0 已采纳 2015-01-30 14:25:31

解决方案4
0 2015-01-31 09:09:14

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

问题描述

4 个解决方案

解决方案1 1 2015-01-30 14:26:34

解决方案2 0 2015-01-30 14:25:29

解决方案3 0 已采纳 2015-01-30 14:25:31

解决方案4 0 2015-01-31 09:09:14

解决方案1
1 2015-01-30 14:26:34

解决方案2
0 2015-01-30 14:25:29

解决方案3
0 已采纳 2015-01-30 14:25:31

解决方案4
0 2015-01-31 09:09:14