CSS3动画：Can'；我的跨度无法向上滑动

试着做一个应该是基本的文字动画。我有一个三个字的H1。每一个都有一个跨度，其中包含一个类。这样，每个单词都可以单独设置动画

第二个和第三个应该是淡入的，这是可行的，但第一个应该是向上滑动的，无论我在CSS中创建什么设置，它只会淡入

H1看起来像这样：

<h1><span class="word-one">Word One</span> <span class="word-two">Word Two</span> <span class="word-three">Word Three</span></h1>

.word-one { bottom: -200px; animation: slideIn 1s ease-in-out forwards; }
@keyframes slideIn {
  100% {
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

---

那么为什么我不能让文本向上滑动呢？

对于您的代码，快速解决方案可以是这样的：

h1{width:600px；position:relative；}/*添加位置，使跨度成为标题的一部分*/
h1 span:n第n个子（2）{左填充：180px；}/*为第一个单词让位*/
.word one{bottom:-200px；动画：slideIn 1s向前缓进缓出；位置：绝对；}/*添加了位置，以便bottom属性可以工作*/
@关键帧幻灯片{
100% {
不透明度：0；
}
100% {
底部：0；
不透明度：1；
}
}

---

Word-One-Word-Two-Word-Three

我在您发布的代码中没有看到任何东西试图使其向上滑动，因为CSS使其淡入/淡出。我相信有一些JQuery函数可以使元素上下滑动，如果您想了解这些函数的话。您也可以使用

position

属性，甚至

margin

在纯CSS中执行此操作。但是，您发布的当前代码不起作用的原因是，在

@keyframes slideIn

中，两个条目都有

100%

。要解决此问题，只需将顶部更改为0%，如下所示：

@关键帧幻灯片{
0% {
不透明度：0；
}
100% {
底部：0；
不透明度：1；
}
}

问题是您正在使用

。

默认为

显示：内联

，这意味着它不尊重上/下页边距。您需要使用div和

float:left

。然后使用

padding-top

将单词一保留在底部，然后通过给出

padding-top:0来设置顶部动画

这是你的解决方案


.wordone{
填充顶部：200px；
动画：滑入1秒，向前滑出；
}
一个字，二个字，三个字{
浮动：左；
}
@关键帧幻灯片{
0% {
不透明度：0；
}
100% {
填充顶部：0；
不透明度：1；
}
}

第一个字
二字
第三个字
这很有效。。。。到了一定程度。然而，现在这三个词都叠在一起了。他们需要按照最初的计划在一条线上。我在每个div中添加了一个float:left:，好消息是它们现在在一行上，但是，文本现在向左对齐，我需要它居中。