如何使用 CSS 动画使文本在其上方的文本块之后在 2 秒内滑动

Question

我正在尝试使用 HTML 和 CSS 动画让一些文本从网页的左侧滑动到中心。目标是让第一个文本块首先滑入中心，然后在延迟 2 秒后，让第二个文本块滑入中心。这样 reader 观察线在页面上写的效果就会很好。

这里是 HTML 代码：

/* .slide1 {
  -webkit-animation : slideIn 2s forwards;
  -moz-animation    : slideIn 2s forwards;
  animation         : slideIn 2s forwards;
  } */
.slide2 {
  /* animation-delay: 2s; */
  margin-top        : -20px;
  -webkit-animation : slideIn 2s forwards;
  -moz-animation    : slideIn 2s forwards;
  animation         : slideIn 2s forwards;
} 
@-webkit-keyframes slideIn {
  0%   { transform: translateX(-900px); }
  100% { transform: translateX(0);      }
}
@-moz-keyframes slideIn {
  0%   { transform: translateX(-900px); }
  100% { transform: translateX(0);      }
}
@keyframes slideIn {
  0%   { transform: translateX(-900px); }
  100% { transform: translateX(0);      }
}

<h1 class="slide1">You want to go to the moon.<br></h1>
<h1 class="slide2">We’re here to give you a shot.</h1>

问题是，当您取消注释上面的 class slide1 时，动画在第二行有效，但在第一行无效。
整个事情一起移动，这不是应该发生的事情。 slide2中的动画延迟的意思是当第一段文字向中心移动完毕后，第二段文字开始向右移动。
令人困惑的是为什么这不起作用 -

如果您对此有任何解决方案，请分享！

Answer 1

您必须先将 .slide1 和 .slide2 放置在屏幕外

transform : translateX(-100vw);

...与您想象的相反，css 命令也必须遵守命令，并且您的 delay 命令必须排在 translate 的全局命令之后

⛐ _{非常非常糟糕} :

animation-delay : 2s;
animation       : 2s slideIn forwards;

^{（它使animation-delay : 0;）}

好 :

animation       : 2s slideIn forwards;
animation-delay : 2s;

。否则你必须尊重参数的正确顺序

animation : 2s 2s slideIn forwards;

但我认为最好的写法是不重复 css:

.slide {
  text-align : center;
  transform  : translateX(-100vw);
  animation  : 2s slideIn forwards;
  }  
.second {
  margin-top      : -.8em;
  animation-delay : 2s;
  } 
@keyframes slideIn {
  0%   { transform : translateX(-100vw); }
  100% { transform : translateX(0);      }
  }

<h1 class="slide">You want to go to the moon.</h1>
<h1 class="slide second">We’re here to give you a shot.</h1>

还要注意单位的使用，以及无论显示宽度如何（如您在问题中指出的那样）将文本居中的正确方法

如何使用 CSS 动画使文本在其上方的文本块之后在 2 秒内滑动

How to make text slide in 2s after a block of text above it using CSS Animation

html

css

animation