CSS动画：每个单词的淡入+变换动画不起作用

Question

我试图让每个单词从 0 不透明度和 translateY(65px) 开始。然后在过渡到 translateY(0) 的同时一次淡入一个单词。每个词都在淡入，但没有翻译。这是我想要完成的一个示例：https://www.bigdropinc.com/（向下滚动到段落）

var $el = $(".example:first"), text = $el.text(),
    words = text.split(" ");

var html = "";
for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
};
$el.html(html).children().each(function(i){
  $(this).addClass('fadeInUp');
});

@keyframes fadeInUp{
    0%{
    transform: translateY(65px);
    opacity: 0;
    }
    100%{
        opacity:1;
        transform:none;
    }
}
.fadeInUp{
    transition: opacity .5s ease-in-out,transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
    animation:fadeInUp 3s forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
    These are some words that should be faded in and transformed one after the other.
</div>

Answer 1

您需要更改 display 属性才能让 transform 正常工作：

var $el = $(".example:first"), text = $el.text(),
    words = text.split(" ");

var html = "";
for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
};
$el.html(html).children().each(function(i){
  $(this).addClass('fadeInUp');
});

@keyframes fadeInUp{
    0%{
    transform: translateY(65px);
    opacity: 0;
    }
    100%{
        opacity:1;
        transform:none;
    }
}
.fadeInUp{
    transition: opacity .5s ease-in-out,transform .8s ease-in-out,-webkit-transform .8s ease-in-out;
    animation:fadeInUp 3s forwards;
    display: inline-block;
    margin-right: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
    These are some words that should be faded in and transformed one after the other.
</div>