Question

尝试做基本的文字动画。我有一个三个字的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>

CSS看起来像这样：

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

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

Answer 1

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

h1 {width: 600px; position: relative;} /* add position so the span will be part of the the header */
h1 span:nth-child(2) {padding-left: 180px;} /* make place for the first word */
.word-one { bottom: -200px; animation: slideIn 1s ease-in-out forwards; position: absolute; } /* added position so the bottom attribute would work  */
@keyframes slideIn {
  100% {
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

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

Answer 2

由于CSS使其淡入/淡出，因此您在发布的代码中没有看到任何尝试使其滑动的信息。我相信，如果您想研究一下，有一些JQuery函数可以使元素向上/向下滑动。您也可以在纯CSS中使用position属性或什至margin来做到这一点。但是，您发布的当前代码无法使用的原因是，您在100%中的两个条目中都有@keyframes slideIn。要解决此问题，只需将顶部的值更改为0％，如下所示：

@keyframes slideIn {
  0% {
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

Answer 3

问题是您正在使用<span>。 <span>默认为display: inline，这表示它不会考虑上下边距。您需要使用div并使用float: left。然后使用padding-top将单词保持在底部，然后通过给padding-top: 0

赋予顶部动画效果

这是您的解决方案。

.word-one { 
      padding-top: 200px; 
      animation: slideIn 1s ease-in-out forwards; 
    }
    .word-one, .word-two, .word-three {
      float: left;
    }

    @keyframes slideIn {
      0% {
        opacity: 0;
      }
      100% {
        padding-top: 0;
        opacity: 1;
      }
    }

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

CSS3动画：无法使我的跨度向上滑动

3 个答案: